我已經(jīng)編寫了js驗(yàn)證代碼,沒有任何已知的問題,但由于某種原因,它在我的網(wǎng)站或我的小提琴上不起作用。
我如何改變鏈接或代碼的順序以使JS驗(yàn)證在bootstrap中工作?
https://jsfiddle.net/Lts7rwya/3/
$(document).ready(function() {
$.validator.addMethod("lettersonly", function(value, element) {
return this.optional(element) || /^[a-z\s]*$/i.test(value);
}, "Please enter only letters");
$.validator.addMethod("numbersonly", function(value, element) {
return this.optional(element) || /^[0-9\s]*$/i.test(value);
}, "Please enter only numbers");
$(".form-contact").validate({
errorClass: "error-class",
validClass: "valid-class",
rules: {
fullname: {
required: true,
lettersonly: true,
minlength: 5
},
youremail: {
required: true,
email: true
},
phone: {
required: true,
maxlength: 13,
numbersonly: true
},
yourmessage: {
required: true,
minlength: 10,
maxlength: 3000
}
},
messages: {
youremail: {
required: "Please enter your full email address."
},
fullname: {
required: "Please enter your first and last name.",
minlength: "Your full name must be at least 4 letters."
},
phone: {
required: "Please enter your full phone number",
minlength: "Your phone number is too short.",
maxlength: "Your phone number is too long."
},
yourmessage: {
required: "Don't forget to enter your message.",
minlength: "Please, add more detail to your message.",
maxlength: "Please keep the message under 3,000 words/characters."
}
},
highlight: function(element, errorClass) {
$(element).removeClass(errorClass);
}
});
});
<link rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="http://cdnjs.cloudflare.com/ajax/libs/validate.js/0.10.0/validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/additional-methods.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div id="message" class="col-md-6 col-sm-12 bordercon">
<form name="sentMessage" id="contactForm" class="form-contact" action="message.php#contact" method="post">
<h2 style="margin-top:0px;"><i class="fa fa-1x fa-envelope"></i> Message Us</h2>
<div class="form-group">
<input type="text" class="form-control emailaddress" name="fullname" placeholder="Your Full Name *" id="fullname">
</div>
<div class="form-group">
<input type="email" class="form-control emailaddress" name="youremail" placeholder="Your Email Address *" id="youremail">
</div>
<div class="form-group">
<input type="tel" class="form-control emailaddress" name="phone" placeholder="Your Phone Number *" id="phone">
</div>
<div class="form-group">
<textarea type="text" class="form-control" name="yourmessage" placeholder="Your message, question, or quote request *" id="yourmessage"></textarea>
</div>
<div class="col-lg-12 text-center">
<div class="buttonwrapper">
<input class="sendmessage" title="Send Message" type="submit" name="send" value="Send Message">
</div>
</div>
<br />
</form>
</div>
<script>
window.jQuery || document.write('<script src="https://code.jquery.com/jquery-1.11.2.min.js"><\/script>')
</script>
上一篇vue 請求url錯誤