JQUery Validate not executed on Click Event
greetings,
Could any one tell me what am I doing wrong on code below. It's not executing on Click. I'm quiet note sure wether $("form").validate on applies to Submit button:
jQuery:
$(document).ready(function () {
//Form Submit
$('#ClockOutBtn').click(function () {
$("form").validate({
rules: {
name: "required", // simple rule, converted to {required:true}
email: {// compound rule
required: true,
email: true
},
url: {
url: true
},
comment: {
required: true
}
},
messages: {
comment: "Please enter a comment."
}
});
});
});
HTNML:
<fieldset>
<div class="form-row"><span class="label">Name *</span><input type="text" name="name" /></div>
<div class="form-row"><span class="label">E-Mail *</span><input type="text" name="email" /></div>
<div class="form-row"><span class="label">URL</span><input type="text" name="url" /></div>
<div class="form-row"><span class="label">Your comment *</span><textarea name="comment" ></textarea></div>
<button id="ClockOutBtn" type="button"/>
开发者_如何学编程 </fieldset>
better than onClick I think is on form submit:
$("form").bind('submit',function(){
this.validate( etc... )
if(valid_criteria)
return true // submit
else
return false // don't submit
})
As far as I see, your <input> fields have no IDs and the validate function matches the names with the IDs from the <input> fields. Also I don't see any <form> tag around your <input> fields so you can't say $("form")....
EDIT:
- You don't need a
clickEvent for your button, because the plugin handle this automatically when the submit button is clicked. - each input field needs an id
- you need to include the jQuery library for the validate plugin
- you need to have a
<form>tag around your input field
Have a look at this: jsfiddle
jQuery:
$(document).ready(function () {
$("#ClockOutBtn").click(function(){
$("#testForm").validate({
rules: {
name: "required", // simple rule, converted to {required:true}
email: {// compound rule
required: true,
email: true
},
url: {
url: true
},
comment: {
required: true
}
},
messages: {
comment: "Please enter a comment."
}
});
});
});
HTML:
<html>
<head>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.js"></script>
</head>
<body>
<form id="testForm">
<fieldset>
<div class="form-row"><span class="label">Name *</span><input type="text" name="name" id="name" /></div>
<div class="form-row"><span class="label">E-Mail *</span><input type="text" name="email" id="email" /></div>
<div class="form-row"><span class="label">URL</span><input type="text" name="url" id="url" /></div>
<div class="form-row"><span class="label">Your comment *</span><textarea name="comment" id="comment" ></textarea></div>
<button id="ClockOutBtn">Test</button>
</fieldset>
</form>
</body>
</html>
加载中,请稍侯......
精彩评论