Reputation: 141
I try to validate a form, when I hit the submit button. But it just continues on posting data entered in the form to the subsequent page like the validation did not even exist.
This the validation codes
<script>
$(document).ready(function() {
$("#regForm").validate({
errorLabelContainer: $("#ErrorBox"). wrapper: "li",
rules: {
fullname: {
required: true,
minlength: "2"
},
email:{
required: true,
email: true
},
address: {
required: true
},
contact_no: {
required: true,
digits: true,
minlength: "7"
},
username: {
required: true
},
password: {
required: true
},
confirmPassword: {
required: true,
equalto: "#password"
}
},
messages: {
fullname: {
required: "Please enter your name",
minlength: "Your name must consist of at least 2 characters"
},
email: {
required: "Please enter your email",
email: "Please enter a recodnisable email format"
},
address: {
required: "Please enter your address"
},
contact_no: {
required: "Please enter your contact number",
digit: "Please enter in digits",
minlength: "Please enter a minimum of 7"
},
username: {
required: "Please enter your username"
},
password: {
required: "Please enter a valid password"
},
confirmPassword: {
required: "Please enter the password again",
equalto: "Please enter a matching password"
}
}
});
});
This is the form
<form class="cmxform" id="regForm" action="DoRegister.php" method="post">
<fieldset style="width:270px;">
<table>
<tr>
<td class="col-right-align"><label><b>Full Name:</b></label></td>
<td><input type="text" name="fullname" /></td>
</tr>
<tr>
<td class="col-right-align"><label><b>Email:</b></label></td>
<td><input type="text" name="email" /></td>
</tr>
<tr>
<td class="col-right-align"><label><b>Address:</b></label></td>
<td><input type="text" name="address" /></td>
</tr>
<tr>
<td class="col-right-align"><label><b>Date of Birth:</b></label></td>
<td><input type="date" name="dob" /></td>
</tr>
<tr>
<td class="col-right-align"><label><b>Contact No:</b></label></td>
<td><input type="text" name="contact_no" /></td>
</tr>
<tr>
<td colspan="2"><hr /></td>
</tr>
<tr>
<td class="col-right-align"><label><b>Username:</b></label></td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td class="col-right-align"><label><b>Password:</b></label></td>
<td><input type="password" name="password" id="password" /></td>
</tr>
<tr>
<td class="col-right-align"><label><b>Confirm Password:</b></label></td>
<td><input type="password" name="confirmPassword" /></td>
</tr>
<tr>
<td class="col-right-align"></td>
<td><input type="submit" value="submit" name="submit"/></td>
</tr>
</table>
</fieldset>
</form>
<div><u1 style="color:red;" id="ErrorBox"></u1></div>
Upvotes: 0
Views: 37
Reputation: 2547
There are some errors in the code such as missing comma and $document instead of $(document) as @tushar mentions.
i fixed those and created jsfiddle for that see the link
http://jsfiddle.net/jigardafda/bb1j3ktp/1/
<form class="cmxform" id="regForm" action="DoRegister.php" method="post">
<fieldset style="width:270px;">
<table>
<tr>
<td class="col-right-align"><label><b>Full Name:</b></label></td>
<td><input type="text" name="fullname" /></td>
</tr>
<tr>
<td class="col-right-align"><label><b>Email:</b></label></td>
<td><input type="text" name="email" /></td>
</tr>
<tr>
<td class="col-right-align"><label><b>Address:</b></label></td>
<td><input type="text" name="address" /></td>
</tr>
<tr>
<td class="col-right-align"><label><b>Date of Birth:</b></label></td>
<td><input type="date" name="dob" /></td>
</tr>
<tr>
<td class="col-right-align"><label><b>Contact No:</b></label></td>
<td><input type="text" name="contact_no" /></td>
</tr>
<tr>
<td colspan="2"><hr /></td>
</tr>
<tr>
<td class="col-right-align"><label><b>Username:</b></label></td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td class="col-right-align"><label><b>Password:</b></label></td>
<td><input type="password" name="password" id="password" /></td>
</tr>
<tr>
<td class="col-right-align"><label><b>Confirm Password:</b></label></td>
<td><input type="password" name="confirmPassword" /></td>
</tr>
<tr>
<td class="col-right-align"></td>
<td><input type="submit" value="submit" name="submit"/></td>
</tr>
</table>
</fieldset>
</form>
<div>
<u1 style="color:red;" id="ErrorBox"></u1></div>
JS
$(document).ready(function() {
$("#regForm").validate({
errorLabelContainer: $("#ErrorBox"),
wrapper: "li",
rules: {
fullname: {
required: true,
minlength: "2"
},
email:{
required: true,
email: true
},
address: {
required: true
},
contact_no: {
required: true,
digits: true,
minlength: "7"
},
username: {
required: true
},
password: {
required: true
},
confirmPassword: {
required: true,
equalto: "#password"
}
},
messages: {
fullname: {
required: "Please enter your name",
minlength: "Your name must consist of at least 2 characters"
},
email: {
required: "Please enter your email",
email: "Please enter a recodnisable email format"
},
address: {
required: "Please enter your address"
},
contact_no: {
required: "Please enter your contact number",
digit: "Please enter in digits",
minlength: "Please enter a minimum of 7"
},
username: {
required: "Please enter your username"
},
password: {
required: "Please enter a valid password"
},
confirmPassword: {
required: "Please enter the password again",
equalto: "Please enter a matching password"
}
}
});
});
Upvotes: 1