23
誰かがこのコードを手伝ってくれますか？私はフォームのブートストラップを使用して、jQueryで検証しようとしています。残念ながら、フォームの検証は、私が間違っていることを私に伝えていません。私はhttp://jqueryvalidation.org/documentation/からスクリプトを入手し、クライアント側の検証のためのチュートリアルに従った。フォーム検証（ブートストラップ）（jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf=8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/jquery.validate.min.js"></script> //Script found online
<script>
$(document).ready(function(){
$('#contact-form').validate(
{
rules: {
name: {
minlength: 2,
required: true
},
email: {
required: true,
email: true
},
message: {
minlength: 2,
required: true
}
},
highlight: function(element) {
$(element).closest('.control-group').removeClass('success').addClass('error');
},
success: function(element) {
element
.text('OK!').addClass('valid')
.closest('.control-group').removeClass('error').addClass('success');
}
});
}); // end document.ready
</script>
</head>
<div class="hero-unit">
<h1>Contact Form</h1> </br>
<form method="POST" action="contact-form-submission.php" class="form-horizontal" id="contact-form">
<div class="control-group">
<label class="control-label" for="name">Name</label>
<div class="controls">
<input type="text" name="name" id="name" placeholder="Your name">
</div>
</div>
<div class="control-group">
<label class="control-label" for="email">Email Address</label>
<div class="controls">
<input type="text" name="email" id="email" placeholder="Your email address">
</div>
</div>
<div class="control-group">
<label class="control-label" for="subject">Subject</label>
<div class="controls">
<select id="subject" name="subject">
<option value="na" selected="">Choose One:</option>
<option value="service">Feedback</option>
<option value="suggestions">Suggestion</option>
<option value="support">Question</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="message">Message</label>
<div class="controls">
<textarea name="message" id="message" rows="8" class="span5" placeholder="The message you want to send to us."></textarea>
</div>
</div>
<div class="form-actions">
<input type="hidden" name="save" value="contact">
<button type="submit" class="btn btn-success">Submit Message</button>
<button type="reset" class="btn">Cancel</button>
</div>
</form>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
私の問題は、外部のjavascript文書を正しく呼び出さなかったことがわかりました。ご協力いただきありがとうございます！ （また、私はそこに私のカスタムCSSを取得しようとしましたが、bootstrap.cssはstyle.cssをオーバーライドしていました）。 – user2693351
私の問題を解決するのに役立ちました。 –