Form Validation using jQuery Validation in Jade template
Question
I am using nodejs and Jade for its template. I need to have form validation.
I have this in my jade file:
form(action='/course/create', method='post', id='createForm')
table#profile
tr
td.left
label(for='courseNum') Course Number *
td.right
input#courseNum.inputBox2(type='text', name='courseNum')
tr
td.left
label(for='courseName') Course Name *
td.right
input#courseName.inputBox2(type='text', name='courseName')
tr
td.left
td.right
button#btnSubmit(type='submit') SUBMIT
script(src='/javascript/jquery-1.9.1.js').
script(src='/javascript/jquery.validate.js').
script.
$(document).ready(function(){
$('#createForm').validate({
rules: {
courseNum : "required",
courseName : "required"
},
messages : {
courseNum : "Required!",
courseName : "Required!"
}
});
});
But I dont know why there are no errors showing up. Yes, the form do not submit when it is not valid, but there are no errors showing up. And the form also do not submit when it is valid. But when I remove the validation, It does submit. So the problem is in the validation.
What I am missing?
Here is the rendered source code from the browser:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="/stylesheets/style.css">
<link rel="stylesheet" href="/stylesheets/reset.css">
<link rel="stylesheet" href="/stylesheets/typography.css">
<script src="/javascript/jquery-1.9.1.js"></script>
<script src="/javascript/jquery.validate.js"></script>
</head>
<body>
<form id="createForm" action="/course/create" method="post">
<table class="profile">
<tr>
<td class="left">
<label for="courseNum">Course Number *</label>
</td>
<td class="right">
<input id="courseNum" type="text" name="courseNum" class="inputBox2">
</td>
</tr>
<tr>
<td class="left">
<label for="courseName">Course Name *</label>
</td>
<td class="right">
<input id="courseName" type="text" name="courseName" class="inputBox2">
</td>
</tr>
<tr>
<td class="left">
</td>
<td class="right">
<button id="btnSubmit" type="submit">SUBMIT</button>
</td>
</tr>
</table>
</form>
<script>
$(document).ready(function(){
$('#createForm').validate({
rules: {
courseNum : "required",
courseName : "required"
},
messages : {
courseNum : "Required!",
courseName : "Required!"
}
});
});
</script>
</body>
</html>
Hope we can find I am missing.. Please help. When I remove the validation, it submits the form. But when there is validation, even it is valid or not, it doesnt submit, and no errors.
1 answers
solution1
0 2014-03-31 19:28:53
$('#createForm').validate({
rules: {
courseNum : "required",
courseName : "required"
},
messages : {
courseNum : "Required!",
courseName : "Required!"
},
submitHandler: function(form){
form.submit();
}
});
or better
$('#createForm').validate({
rules: {
courseNum : { required:true },
courseName : { required:true }
},
messages : {
courseNum : "Required!",
courseName : "Required!"
},
submitHandler: function(form){
form.submit();
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.