<form id="location_forms" method="post" action="">
<div>
<label for="in_location">First Name:</label>
<input type="text" id="in_location" name="in_location" onkeypress="return event.charCode >= 48 && event.charCode <= 57"></input>
</div>
<div>
<label for="lname">Last Name:</label>
<input type="text" id="out_location" name="out_location" onkeypress="return event.charCode >= 48 && event.charCode <= 57"></input>
</div>
<div>
<label for="user_email">Email:</label>
<input type="email" id="user_email" name="user_email"></input>
</div>
<div>
<label for="psword">Password:</label>
<input type="password" id="psword" name="psword"></input>
</div>
<div>
<input type="submit" value="Submit" />
</div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script>
$(document).ready(function() {
$('form[id="location_forms"]').validate({
rules: {
in_location: 'required',
out_location: 'required',
user_email: {
required: true,
email: true,
},
psword: {
required: true,
minlength: 8,
}
},
messages: {
in_location: 'This field is required',
out_location: 'This field is required',
user_email: 'Enter a valid email',
psword: {
minlength: 'Password must be at least 8 characters long'
}
},
submitHandler: function(form) {
form.submit();
}
});
});
</script>
<div>
<label for="in_location">First Name:</label>
<input type="text" id="in_location" name="in_location" onkeypress="return event.charCode >= 48 && event.charCode <= 57"></input>
</div>
<div>
<label for="lname">Last Name:</label>
<input type="text" id="out_location" name="out_location" onkeypress="return event.charCode >= 48 && event.charCode <= 57"></input>
</div>
<div>
<label for="user_email">Email:</label>
<input type="email" id="user_email" name="user_email"></input>
</div>
<div>
<label for="psword">Password:</label>
<input type="password" id="psword" name="psword"></input>
</div>
<div>
<input type="submit" value="Submit" />
</div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script>
$(document).ready(function() {
$('form[id="location_forms"]').validate({
rules: {
in_location: 'required',
out_location: 'required',
user_email: {
required: true,
email: true,
},
psword: {
required: true,
minlength: 8,
}
},
messages: {
in_location: 'This field is required',
out_location: 'This field is required',
user_email: 'Enter a valid email',
psword: {
minlength: 'Password must be at least 8 characters long'
}
},
submitHandler: function(form) {
form.submit();
}
});
});
</script>
No comments:
Post a Comment