首先,我有一个验证脚本,它工作正常,如果我为警告框添加了一个脚本,验证功能不起作用。我需要的是,首先,验证器应该执行,之后,按钮的警报应该执行。
<script>
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#ContactForm1" ).validate({
rules: {
fname: "required",
lname: "required",
phone: "required",
email: {
required: true,
email: true
},
message: "required",
}
});
</script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
alert("Hello World!");
});
});
</script>
答案 0 :(得分:1)
$("#ContactForm1").validate({
rules: {
fname: "required",
lname: "required",
phone: "required",
email: {
required: true,
email: true
},
message: "required",
},
submitHandler: function() {
alert("Hello World!");
}
});
答案 1 :(得分:-1)
这是一个有效的例子。
要检查您的表单是否有效,只需使用:
if ($( "#ContactForm1" ).valid())
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#ContactForm1" ).validate({
rules: {
fname: "required",
lname: "required",
phone: "required",
email: {
required: true,
email: true
},
message: "required",
},
submitHandler: function() {
//$('#btn').click();
}}
);
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
$(document).ready(function(){
$("#btn").click(function(){
if ($( "#ContactForm1" ).valid()) {
alert('runs only if form is valid');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script>
<form id="ContactForm1" method="get" action="">
<fieldset>
<legend>Please provide your name, email address (won't be published) and a comment</legend>
<p>
<label for="fname">Name (required, at least 2 characters)</label>
<input id="cname" name="fname" minlength="2" type="text" required>
</p>
<p>
<label for="email">E-Mail (required)</label>
<input id="email" type="email" name="email" required>
</p>
<p>
<label for="phone">Phone (optional)</label>
<input id="phone" type="phone" name="phone">
</p>
<p>
<label for="phone">URL (optional)</label>
<input id="phone" type="phone" name="phone">
</p>
<p>
<label for="message">Your message (required)</label>
<textarea id="message" name="message" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
<p>
<button type="button" id="btn">Your button</button>
</p>
</fieldset>
</form>