Develop Reference

Trying to submit form using jquery form validator with submitHandler

Hi I am playing around with the jQuery form validator, form validates perfectly fine, the problem is when I click submit, the page refreshes which is not my desired goal. The form does post the data the data does enter my database which is a good thing.
my javascript file
$().ready(function () {
$('#registerForm').validate({
rules: {
firstname: {
required: true,
nowhitespace: true,
lettersonly: true,
},
surname: "required",
password: {
required: true,
minlength: 5,
maxlength: 10
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password1",
},
email: {
nowhitespace: true,
}
},
messages: {
firstname: {
required: 'Please enter a name',
},
surname: {
required: 'Please enter a surname',
},
email: {
required: 'Please enter an email address',
email: 'Please enter a <em>valid</em> email'
},
password: {
required: 'Please provide a password',
},
confirm_password: {
required: 'Please confirm your password',
}
},
errorElement: 'ul',
errorPlacement: function (error, element) {
let placement = $(element).data('error');
if (placement) {
$(placement).append(error)
} else {
error.insertAfter(element);
}
},
submitHandler: function () {
postContent();
},
});
function postContent() {
$('#registerForm').on('submit',function () {
let that = $(this),
url = that.attr('action'),
type = that.attr('method'),
data = {};
that.find('[name]').each(function (index, value) {
let that = $(this),
name = that.attr('name'),
value = that.val();
data['name'] = value;
});
$.ajax({
url: url,
type: type,
data: data,
success: function (response) {
console.log(response);
}
});
return false;
});
}
and the html form itself
<div id="registerModal" class="modal">
<div class="modal-content">
<h4 class="center container">Register</h4>
<div class="center" id="error-list">
<ul id="required"></ul>
<ul id="password"></ul>
<ul id="passwordShort"></ul>
</div>
<div class="row center">
<form class="col s12" action="account.php" method="post" id="registerForm" novalidate="novalidate">
<div class="row">
<div class="input-field col s12 l6">
<input id="first_name" type="text" class="validate" name="firstname" required>
<label for="first_name">First Name *</label>
</div>
<div class="input-field col s12 l6">
<input id="last_name" type="text" class="validate" name="surname" required>
<label for="last_name">Last Name *</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" class="validate" name="email" required/>
<label for="email">Email *</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="password1" type="password" class="validate" name="password" required/>
<label for="password">Password *</label>
<ul id="passError"></ul>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="confirm_password" type="password" class="validate" name="confirm_password" required/>
<label for="email">Confirm Password *</label>
</div>
</div>
<button class="btn waves-effect waves-light" id="register" name="register" type="submit">Register
<i class="material-icons right">send</i>
</button>
<span> </span>
</form>
</div>
</div>
<div class="modal-footer">
</div>

To stop the default behaviour of a form submit from refreshing your page you need to add the following.
$('#registerForm').on('submit',function (e) {
e.preventDefault();
...
An alternative method would be to use "return false;" which prevents the default event from occurring, and it also stops the event from propagating.
$('#registerForm').on('submit',function (e) {
return false;
...

How to call jquery post method after jquery validation success

When I am calling submithandler in validation rules, I want to call post function to submit the form but it's not firing.
Below is my code
$(function() {
$.validator.addMethod("time", function(value, element) {
return this.optional(element) || /^(([0-1]?[0-9])|([2][0-3])):([0-5]?[0-9])(:([0-5]?[0-9]))?$/i.test(value);
}, "Please enter a valid time (24 Hour Format).");
//^(([0-1]?[0-2])|([2][0-3])):([0-5]?[0-9])(a|p)m?$ 12 hour
// /^(([0-1]?[0-9])|([2][0-3])):([0-5]?[0-9])(:([0-5]?[0-9]))?$/i 24 hour
// alert($(#isNoOfExecutionSet").val());
jQuery.validator.setDefaults({
highlight: function(element) {
jQuery(element).closest('.form-group').addClass('has-error');
},
unhighlight: function(element) {
jQuery(element).closest('.form-group').removeClass('has-error');
},
errorElement: 'span',
errorClass: 'label label-danger',
errorPlacement: function(error, element) {
if (element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
}
});
$('#form').validate({
rules: {
full_name: {
required: true,
minlength: 3,
maxlength: 100
// email: true
},
short_name: {
required: true,
minlength: 3,
maxlength: 100
// number: true
// email: true
},
password: {
required: true,
minlength: 3,
maxlength: 100
// number: true
// email: true
},
total_branches: {
required: true,
number: true
// email: true
},
confirm: {
equalTo: "#password"
},
submitHandler: function(form) {
alert('jj');
}
}
});
}); // end of function
below is my html code
<div class="container">
<div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<div class="modal-body">
<div class="row">
<div class="col-xs-12">
<h2> Institute Info</h2>
<form role="form" method="post" id="form">
<hr class="colorgraph">
<p style="color:#f0776c;float:left" id="msg"></p>
<div class="form-group">
<input type="text" class="form-control input-lg" id="full_name" name="full_name" type="full_name" value="saljdf" placeholder="Enter Full Name">
</div>
<div class="form-group">
<input type="tet" class="form-control input-lg" id="short_name" name="short_name" type="short_name" value="saljdf" placeholder="Enter Short Name">
</div>
<div class="form-group">
<input type="number" class="form-control input-lg" id="total_branches" name="total_branches" value="12" type="total_branches" placeholder="Enter Total Branches Allowed">
</div>
<div class="form-group">
<input type="password" class="form-control input-lg" id="password" name="password" type="password" value="123" placeholder="Enter Password">
</div>
<div class="form-group">
<input type="password" class="form-control input-lg" id="confirm" name="confirm" type="password" value="saljdf" placeholder="Confirm Password">
</div>
<div class="form-group">
<select class="form-control" id="status" name="status">
<option value="Active" >Active</option>
<option value="Non-Active" >Non-Active</option>
</select>
</div>
<hr class="colorgraph">
<div class="row">
<!--<div class="col-xs-12 col-md-6"><input type="submit" value="Register" class="btn btn-primary btn-block btn-lg" tabindex="7"></div>-->
<div class="col-xs-12 "><button type="submit" class="btn btn-lg btn-primary btn-block" name="btnsave" value="btnsave" id="btnsave">Create Institute</button></div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>

You mean ajax call i.e jquery post method.
You can write ajax call withun function and whenever your form valiate successfully call the same ajax function from that loop/conditional statement.
Like.
function myFunction(){
// JQuery post method i.e Ajax call
}
$("form"). submit(function(){
// validation cade
if(validate){
myFunction();
}
});
This is no exact code, I just try to suggest the solution it works for me in many projects you can try.

Form validation messages not showing

I am developing a registration form for a project I am working on. The project uses Bootstrap and jQuery to control form validation and I am using the validate plugin. This is setup in an ASP.NET MVC 4 Web application using C#. I have all my bundles and routing properly configured, but am having no luck with getting messages to display on the form.
Here is the form:
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Registration Form</h2>
<form id="formRegister" class="form-horizontal col-xs-3">
<div class="form-group">
<label for="textFirstName" class="control-label col-xs-4">First name</label>
<div class="col-xs-8">
<input type="text" name="textFirstName" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="textLastName" class="control-label col-xs-4">Last name</label>
<div class="col-xs-8">
<input type="text" name="textLastName" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="textEmail" class="control-label col-xs-4">Email</label>
<div class="col-xs-8">
<input type="text" name="textEmail" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="textEmail2" class="control-label col-xs-4">Reenter email</label>
<div class="col-xs-8">
<input type="text" name="textEmail2" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="passwordPW1" class="control-label col-xs-4">Password</label>
<div class="col-xs-8">
<input type="password" name="passwordPW1" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="passwordPW2" class="control-label col-xs-4">Reenter Password</label>
<div class="col-xs-8">
<input type="password" name="passwordPW2" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="btn-group col-xs-offset-4 col-xs-10">
<button type="reset" class="btn btn-info">Clear</button>
<button type="submit" class="btn btn-info">Submit</button>
</div>
</div>
</form>
Here is the JavaScript:
$(document).ready(function () {
$('#formRegister').validate({
rules: {
textFirstName: {
required: true,
minlength: 1,
maxlength: 50
},
textLastName: {
required: false,
maxlength: 50
},
textEmail: {
required: true,
email: true
},
textEmail2: {
required: true,
email: true,
equalTo: '#textEmail'
},
passwordPW1: {
required: true,
minlength: 4
},
passwordPW2: {
required: true,
equalTo: '#passwordPW1'
}
},
messages: {
textFirstName: "The first name must be from 1 to 50 characters in length",
textLastName: "The last name must be from 0 to 50 characters in length",
textEmail: "Please enter a valid email address",
textEmail2: "Emails do not match",
passwordPW1: "The password must be from 4 to 50 characters in length",
passwordPW2: "Passwords do not match"
},
highlight: function(element){
$(element).closest('.form-control').removeClass('success').addClass('error');
},
success: function(element){
element.text('OK!').addClass('valid')
.closest('.form-control').removeClass('error').addClass('success');
},
submitHandler: function (form) {
form.submit();
}
});
});

Properties like messages, highlight are not sub properties of rules
jQuery(function ($) {
$('#formRegister').validate({
rules: {
textFirstName: {
required: true,
minlength: 1,
maxlength: 50
},
textLastName: {
required: false,
maxlength: 50
},
textEmail: {
required: true,
email: true
},
textEmail2: {
required: true,
email: true,
equalTo: '#textEmail'
},
passwordPW1: {
required: true,
minlength: 4
},
passwordPW2: {
required: true,
equalTo: '#passwordPW1'
}
},
messages: {
textFirstName: "The first name must be from 1 to 50 characters in length",
textLastName: "The last name must be from 0 to 50 characters in length",
textEmail: "Please enter a valid email address",
textEmail2: "Emails do not match",
passwordPW1: "The password must be from 4 to 50 characters in length",
passwordPW2: "Passwords do not match"
},
highlight: function (element) {
$(element).closest('.form-group').removeClass('success').addClass('error');
},
success: function (element) {
element.text('OK!').addClass('valid')
.closest('.form-group').removeClass('error').addClass('success');
},
submitHandler: function (form) {
form.submit();
}
});
});
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.32/jquery.form.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.metadata/2.0/jquery.metadata.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.js"></script>
<h2>Registration Form</h2>
<form id="formRegister" class="form-horizontal col-xs-3">
<div class="form-group">
<label for="textFirstName" class="control-label col-xs-4">First name</label>
<div class="col-xs-8">
<input type="text" name="textFirstName" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="textLastName" class="control-label col-xs-4">Last name</label>
<div class="col-xs-8">
<input type="text" name="textLastName" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="textEmail" class="control-label col-xs-4">Email</label>
<div class="col-xs-8">
<input type="text" name="textEmail" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="textEmail2" class="control-label col-xs-4">Reenter email</label>
<div class="col-xs-8">
<input type="text" name="textEmail2" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="passwordPW1" class="control-label col-xs-4">Password</label>
<div class="col-xs-8">
<input type="password" name="passwordPW1" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="passwordPW2" class="control-label col-xs-4">Reenter Password</label>
<div class="col-xs-8">
<input type="password" name="passwordPW2" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="btn-group col-xs-offset-4 col-xs-10">
<button type="reset" class="btn btn-info">Clear</button>
<button type="submit" class="btn btn-info">Submit</button>
</div>
</div>
</form>

You need to add a messages container so the messages can be shown somewhere.
Add:
container: '#messages',
on your js function just before the feedbackIcons and
<div class="form-group">
<div id="messages"></div>
</div>

Jquery validator submits when bootstrap form is invalid

So basically, when the form is valid it should link to a new page that says success. that part works fine.
However if the form is invalid the form still submits, specifically i noticed as long as the all three fields are filled in the form submits even if the passwords do not match. If one of the fields is left blank then it does not submit (as it should)
Is there a problem with my validate function i am not seeing or is it in the bootstrap?
demo The demo submits on the second click for some reason
jquery validate
$(document).ready(function() {
$('#signin').validate({
rules: {
name: {
required: true,
name: true
},
password: {
required: true,
rangelength:[8,12]
},
confirmPassword: {equalTo:'#password'},
spam: "required"
},
messages: {
name: {
required: "Please supply a Username."
},
password: {
required: 'Please type a password',
rangelength: 'Password must be between 8 and 12 characters long.'
},
confirmPassword: {
equalTo: 'The passwords do not match.'
}
},
});
});
HTML
<div class="container">
<div class="col-lg-6">
<h2 class="form-signin-heading">Please sign in</h2>
<form class="form-horizontal required" action="success.html" method="get" name="signin" id="signin" role="form">
<div class="form-group">
<label for="inputUsername" class=" required col-lg-2 control-label">UserName</label>
<div class="col-lg-5">
<input name="name" type="text" class="form-control" id="username" placeholder="Username"required autofocus>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class=" required col-lg-2 control-label">Password</label>
<div class="col-lg-5">
<input name="password" type="password" class="form-control" id="password" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="confirmPassword" class="col-lg-2 control-label">Confirm Password</label>
<div class="col-lg-5">
<input name="confirmPassword" type="password" class="form-control" id="confirmPassword" placeholder=" Retype Password">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" name="submit" id="submit" class="btn btn-default">SignIn</button>
</div>
</div>
</div>
</form>

Ok, you need to remove the extraneous name param.
name: {
required: true
, name: true
},
RULES:
:rules: {
name: {
required: true
},
password: {
required: true,
rangelength:[8,12]
},
confirmPassword: {equalTo:'#password'},
spam: "required"
},

JQuery Validate individual fieldsets

I've developed a form with multiple fieldsets to represent steps in filling out the complete form. The fieldsets are shown and hidden by button click (one on each fieldset) but I want to validate each fieldset before the next is shown.
I'm new to JQuery and I'm having a bit of trouble. I found this guide ( http://encosia.com/2009/11/24/asp-net-webforms-validation-groups-with-jquery-validation/) that allows me to validate different fieldsets independently but my problem is how do I use that validation to control the showing and hiding of the relevent fieldsets.
I thought the way to do this would be to create a function from each click event for the buttons but I can't seem to call the validate function correctly.
I'm afraid I'm completely confused now! Help!!

I stumbled across this example just before finding your question while googling something else, hoping this will help someone with the same problem:
https://djaodjin.com/blog/jquery-multi-step-validation.blog.html
Basically, apparently validation.js only validates the visible fields by default.
Here's the full example code, click through to the link to see the explanation:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Multiple step form</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/additional-methods.js"></script>
<style type="text/css">
#personal_information,
#company_information{
display:none;
}
</style>
</head>
<body>
<div class="container">
<div class="col-lg-5">
<form class="form-horizontal" action="" method="POST" id="myform">
<fieldset id="account_information" class="">
<legend>Account information</legend>
<div class="form-group">
<label for="username" class="col-lg-4 control-label">Username</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="username" name="username" placeholder="username">
</div>
</div>
<div class="form-group">
<label for="password" class="col-lg-4 control-label">Password</label>
<div class="col-lg-8">
<input type="password" class="form-control" id="password" name="password" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="conf_password" class="col-lg-4 control-label">Confirm password</label>
<div class="col-lg-8">
<input type="password" class="form-control" id="conf_password" name="conf_password" placeholder="Password">
</div>
</div>
<p><a class="btn btn-primary next">next</a></p>
</fieldset>
<fieldset id="company_information" class="">
<legend>Account information</legend>
<div class="form-group">
<label for="company" class="col-lg-4 control-label">Company</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="company" name="company" placeholder="Company">
</div>
</div>
<div class="form-group">
<label for="url" class="col-lg-4 control-label">Website url</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="url" name="url" placeholder="Website url">
</div>
</div>
<p><a class="btn btn-primary next">next</a></p>
</fieldset>
<fieldset id="personal_information" class="">
<legend>Personal information</legend>
<div class="form-group">
<label for="name" class="col-lg-4 control-label">Name</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="name" name="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="email" class="col-lg-4 control-label">Email</label>
<div class="col-lg-8">
<input type="email" class="form-control" id="email" name="email" placeholder="Email">
</div>
</div>
<p><a class="btn btn-primary" id="previous" >Previous</a></p>
<p><input class="btn btn-success" type="submit" value="submit"></p>
</fieldset>
</form>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
// Custom method to validate username
$.validator.addMethod("usernameRegex", function(value, element) {
return this.optional(element) || /^[a-zA-Z0-9]*$/i.test(value);
}, "Username must contain only letters, numbers");
$(".next").click(function(){
var form = $("#myform");
form.validate({
errorElement: 'span',
errorClass: 'help-block',
highlight: function(element, errorClass, validClass) {
$(element).closest('.form-group').addClass("has-error");
},
unhighlight: function(element, errorClass, validClass) {
$(element).closest('.form-group').removeClass("has-error");
},
rules: {
username: {
required: true,
usernameRegex: true,
minlength: 6,
},
password : {
required: true,
},
conf_password : {
required: true,
equalTo: '#password',
},
company:{
required: true,
},
url:{
required: true,
},
name: {
required: true,
minlength: 3,
},
email: {
required: true,
minlength: 3,
},
},
messages: {
username: {
required: "Username required",
},
password : {
required: "Password required",
},
conf_password : {
required: "Password required",
equalTo: "Password don't match",
},
name: {
required: "Name required",
},
email: {
required: "Email required",
},
}
});
if (form.valid() === true){
if ($('#account_information').is(":visible")){
current_fs = $('#account_information');
next_fs = $('#company_information');
}else if($('#company_information').is(":visible")){
current_fs = $('#company_information');
next_fs = $('#personal_information');
}
next_fs.show();
current_fs.hide();
}
});
$('#previous').click(function(){
if($('#company_information').is(":visible")){
current_fs = $('#company_information');
next_fs = $('#account_information');
}else if ($('#personal_information').is(":visible")){
current_fs = $('#personal_information');
next_fs = $('#company_information');
}
next_fs.show();
current_fs.hide();
});
});
</script>
</body>
</html>

You can write a custom validation function for each fieldset and call it using the .keyup function. Here is an example:
HTML:
<div id="fieldset1">
<input type="text" name="fname" id="fname">
</div>
<div id="fieldset2">
<!--hidden using css-->
<input type="text" name="fname" id="fname">
</div>
Javascript:
$('#fieldset1 #fname').keyup(function () {
// Runs every time your keystroke is released on this input
if($(this).val() == 'Adam') {
// Checks to see if the field's value is Adam. If it is, then it shows the next fieldset. Otherwise it hides it.
$('#fieldset2').show();
} else {
$('#fieldset2').hide();
}
}
This is obviously meant as a very simple example, but it illustrates what you will need to do in order to validate your form and modify the DOM based on user input.

Using jQuery validation plugin you can get around this by having multiple forms in the same page. You can then call:
$('#myFormId').validate()
on the forms of interest one at the time.