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;
...

Why form validations are not working with jquery.validation.js?

I'm trying out a new plugin which is called jquery.validation.js and it seems that after I try to apply them it doesn't work. Can someone kindly help me on this?
Here's the page.html
<form id="CustomerForm" class="form-horizontal group-border stripped" name="CustomerDetails">
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label">Customer Name</label>
<div class="col-lg-10 col-md-9">
<input type="text" ng-model="CusDetails.cname" class="form-control" name="cname" id="cname"/>
</div>
</div>
<!--end of .form-group-->
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label">Company Name</label>
<div class="col-lg-10 col-md-9">
<input type="text" ng-model="CusDetails.comname" class="form-control" name="comname"id="comname" />
</div>
</div>
<!--end of .form-group-->
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label" for="">Telephone Number</label>
<div class="col-lg-10 col-md-9">
<div class="input-group input-icon">
<span class="input-group-addon"><i class="fa fa-phone s16"></i></span>
<input ng-model="CusDetails.tel" class="form-control" name="ctel" type="text" placeholder="(999) 999-9999" id="ctel">
</div>
</div>
</div>
<!-- End .form-group -->
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label" for="">Email address</label>
<div class="col-lg-10 col-md-9">
<input ng-model="CusDetails.email" type="email" class="form-control" name="email" placeholder="someone#example.com" id="email">
</div>
</div>
<!-- End .form-group -->
</form>
div class="row">
<div class="col-md-1"></div>
<div class="col-lg-9 col-sm-9 col-xs-12">
<button name="btnSubmit" type="submit" ng-click="AddCustomer()" class="btn btn-info pad"><span class="fa fa-user-plus"></span> Add Customer</button>
<button type="submit" id="cancel" class="btn btn-default pad">Cancel</button>
</div>
</div>
Here's what the angular.controller.js looks
function AddCustomerController($scope, $location, $rootScope, $http, CustService) {
(function initController() {
})();
$scope.AddCustomer = function () {
var CustomerDetails = {
cname: $scope.CusDetails.cname,
comname: $scope.CusDetails.comname,
tel: $scope.CusDetails.tel,
email: $scope.CusDetails.email
};
CustService.Customer(CustomerDetails, function (res) {
console.log(res);
$.extend($.gritter.options, {
position: 'bottom-right',
});
if (res.data == 'success') {
$.gritter.add({
title: 'Success!',
text: 'Successfully added the new customer ' + '<h4><span class="label label-primary">' + CustomerDetails.cname + '</span></h4>',
time: '',
close_icon: 'l-arrows-remove s16',
icon: 'glyphicon glyphicon-ok-circle',
class_name: 'success-notice'
});
$scope.CusDetails = {};
}
else {
$.gritter.add({
title: 'Failed!',
text: 'Failed to add a new customer. Please retry.',
time: '',
close_icon: 'l-arrows-remove s16',
icon: 'glyphicon glyphicon-remove-circle',
class_name: 'error-notice'
});
}
});
}
}
And finally the validation.js for validating above form
$(document).ready(function () {
$("#CustomerDetails").validate({
debug:true,
errorPlacement: function (error, element) {
var place = element.closest('.input-group');
if (!place.get(0)) {
place = element;
}
if (error.text() !== '') {
place.after(error);
}
},
errorClass: 'help-block',
rules: {
cname: {
required: true,
},
comname: {
required: true
},
ctel: {
required: true,
min: 10
},
email: {
required: true,
email: true
}
},
messages: {
cname: {
required: "Please enter customer name!"
},
comname: {
required: "Please enter company name!"
},
ctel: {
required: "Please enter telephone number",
minlength: "Telephone number should be atleast 10 digits"
}
},
highlight: function (label) {
$(label).closest('.form-group').removeClass('has-success').addClass('has-error');
},
success: function (label) {
$(label).closest('.form-group').removeClass('has-error');
label.remove();
}
});
});
The error from debuggging from the built in function in validation says:
Nothing selected, can't validate, returning nothing.
What am I doing wrong? Why isn't the validation.js isn't getting called?
Help would be greatly appreciated.

Bootstrap validation not working on form submission

So I am new to bootstrap and so far I've got everything working the way I want. I have created a contact form which uses the Modal Form and sends the email via PHP using the Mail function.
I have created a script to do the validation on the form. If the validation passes I want the email to be sent out.
Currently when the user submits the form that is blank the validation isn't working and the email is getting sent.
Please keep in mind I'm am new to working with bootstrap.
HTML
<div id="ContactUs" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">× </button>
<h4 class="modal-title" id="myModalLabel">Contact Us</h4>
<p><b>XXXX</b><br>
Company Phone: XXXXX
</p>
</div>
<form id="contactForm" method="post" action="scripts/email.php">
<div class="modal-body">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" id="name" class="form-control" placeholder="Please enter your full name here.">
<label for="name">Email</label>
<input type="text" name="email" id="email" class="form-control" placeholder="Please enter your email address here.">
<label for="name">Subject</label>
<input type="text" name="subject" id="subject" class="form-control" placeholder="Please enter your subject here.">
<label for="message">Message</label>
<textarea name="message" class="form-control" placeholder="Please enter your message here."></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
Script
$(document).ready(function()
{
$validator = $("#contactForm").validate({
errorClass:'error',
validClass:'success',
errorElement:'span',
highlight: function (element, errorClass, validClass) {
$(element).parents("div[class='clearfix']").addClass(errorClass).removeClass(validClass);
},
unhighlight: function (element, errorClass, validClass) {
$(element).parents(".error").removeClass(errorClass).addClass(validClass);
},
rules: {
name: {
required: true,
minlength: 2
},
subject: {
required: true,
minlength: 10
},
email: {
required: true,
email: true
},
message: {
required: true,
minlength: 10
}
},
messages: {
name: {
required: '<span class="help-inline">Your name is required</span>',
minlength: jQuery.format('<span class="help-inline">2 chars</span>')
},
subject: {
required: '<span class="help-inline">A Subject is required.
</span>',
minlength:jQuery.format('<span class="help-inline">10 characters</span>')
},
email: {
required: '<span class="help-inline">Email.</span>',
email: '<span class="help-inline">Ex : name#exemple.com</span>'
},
message: {
required: '<span class="help-block">Message</span>',
minlength: jQuery.format('<span class="help-block">10 chars</span>')
}
},
submitHandler: function(form)
{
$('form').submit(function() {
if ($validator.numberOfInvalids() > 0)
{
$('#submit').modal('hide');
} else
{
$('#submit').modal('show');
}
});
}
});
});

On each input field add 'required'. Simple way to ensure each field has data
<form id="contactForm" method="post" action="scripts/email.php">
<div class="modal-body">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" id="name" class="form-control" placeholder="Please enter your full name here." required />
<label for="name">Email</label>
<input type="text" name="email" id="email" class="form-control" placeholder="Please enter your email address here." required />
<label for="name">Subject</label>
<input type="text" name="subject" id="subject" class="form-control" placeholder="Please enter your subject here." required />
<label for="message">Message</label>
<textarea name="message" class="form-control" placeholder="Please enter your message here." required /></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>

Did you already include jquery and validation library?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>

pass your form to your button with attribute
<button type="submit" class="btn btn-primary" form="ContactUs">Submit</button>
you should put your form id inside that

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"
},