Develop Reference

jQuery Validation inside Bootstrap modal doesn't fire

Ok so i'm trying to use jQuery Validation to validate my form inside modal. However, my jQuery Validation doesn't even fire at all, not even an error. I already used the debug, and there's a warning:
Nothing selected, can't validate, returning nothing.
These are my codes:
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Form Add Question Category</h4>
</div>
<form id="form_input" method="post" action="">
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<input type="hidden" id="submit_type" name="submit_type" value="address_insert"/>
<div class="form-group">
<div class="col-md-6 col-sm-12 col-xs-12">
<label for="txtDeviceID">Device ID</label>
<input type="text" class="form-control" id="txtDeviceID" name="txtDeviceID" placeholder="Device ID"/>
<div class="error_validation" style="color:red; font-size:9px;"></div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<label for="txtPassword">Password</label>
<input type="text" class="form-control" id="txtPassword" name="txtPassword" placeholder="Password"/>
<div class="error_validation" style="color:red; font-size:9px;"></div>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-sm-12 col-xs-12">
<label>Employee</label>
<select class="select2_employee" name="select2_employee" style="width:100%"></select>
<div class="error_validation" style="color:red; font-size:9px;"></div>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-sm-12 col-xs-12">
<label>Branch</label>
<select class="select2_branch" name="select2_branch" style="width:100%"></select>
<div class="error_validation" style="color:red; font-size:9px;"></div>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-sm-6 col-xs-6">
<label for="txtIPLocal">IP Local</label>
<input type="text" class="form-control" id="txtIPLocal" name="txtIPLocal" placeholder="IP Local"/>
<div class="error_validation" style="color:red; font-size:9px;"></div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<label for="txtPortLocal">Port Local</label>
<input type="text" class="form-control" id="txtPortLocal" name="txtPortLocal" placeholder="Port Local" />
<div class="error_validation" style="color:red; font-size:9px;"></div>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-sm-6 col-xs-6">
<label for="txtIPPublic">IP Public</label>
<input type="text" class="form-control" id="txtIPPublic" name="txtIPPublic" placeholder="IP Public"/>
<div class="error_validation" style="color:red; font-size:9px;"></div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<label for="txtPortPublic">Port Public</label>
<input type="text" class="form-control" id="txtPortPublic" name="txtPortPublic" placeholder="Port Public"/>
<div class="error_validation" style="color:red; font-size:9px;"></div>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-sm-6 col-xs-6">
<label for="txtIPAlternative">IP Alternative</label>
<input type="text" class="form-control" id="txtIPAlternative" name="txtIPAlternative" placeholder="IP Alternative"/>
<div class="error_validation" style="color:red; font-size:9px;"></div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<label for="txtPortAlternative">Port Alternative</label>
<input type="text" class="form-control" id="txtPortAlternative" name="txtPortAlternative" placeholder="Port Alternative"/>
<div class="error_validation" style="color:red; font-size:9px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" value='Submit' class="btn btn-md btn-primary" >Submit</button>
<button type="button" class="btn btn-md btn-default" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
The javascript:
var validate_start = $("#myModal #form_input").validate({
debug: true,
ignore: [],
rules: {
txtDeviceID: {
required: true
// lettersOnlySpace: true,
// minlength: 5,
// maxlength: 15
},
txtPassword: {
required: true
},
select2_employee: {
required: true
},
select2_branch: {
required: true
},
txtIPLocal: {
required: true
},
txtPortLocal: {
required: true,
number: true,
range: [1, 65535]
},
txtIPPublic: {
required: true
},
txtPortPublic: {
required: true,
number: true,
range: [1, 65535]
},
txtIPAlternative: {
required: true
},
txtPortAlternative: {
required: true,
number: true,
range: [1, 65535]
}
},
// messages: {
// txtDeviceID: {
// required: "Input required."
// },
// txtPassword: {
// required: "Input required."
// },
// select2_employee: {
// required: "Input required."
// },
// select2_branch: {
// required: "Input required."
// },
// txtIPLocal: {
// required: "Input required."
// },
// txtPortLocal: {
// required: "Input required."
// },
// txtIPPublic: {
// required: "Input required."
// },
// txtPortPublic: {
// required: "Input required."
// },
// txtIPAlternative: {
// required: "Input required."
// },
// txtPortAlternative: {
// required: "Input required."
// }
// },
errorPlacement: function (error, element) {
console.log("validate success!");
error.appendTo(element.siblings('.error_validation'));
},
submitHandler: function (form) {
console.log(form);
// $.ajax({
// url: $("#submit_type").val(),
// type: 'POST',
// dataType: 'JSON',
// data: function (params) {
// console.log("parameter");
// console.log(params);
// return JSON.stringify($(form).serialize());
// },
// // data: $(form).serialize(),
// success: function () {
// // $(form).html("<div id='message'></div>");
// // $('#message').html("<h2>Your request is on the way!</h2>")
// // .append("<p>someone</p>")
// // .hide()
// // .fadeIn(1500, function () {
// // $('#message').append("<img id='checkmark' src='images/ok.png' />");
// // });
// }
// });
return false; // required to block normal submit since you used ajax
},
invalidHandler: function (event, validator) {
// 'this' refers to the form
var errors = validator.numberOfInvalids();
console.log("error " + errors);
}
});
I've already tried many solution, from fixing the form inside modal body, use the unobstrusive library, but it still doesn't want to fire. Please help me, one lead to trigger the validation is enough, i will follow afterwards.
Thankyou.

Try to init the validation code right after the modal is shown. If you have something like $('#myModal').open(), then you have to init the validation after the open method. I believe it is something related to the DOM manipulation.

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

codeigniter popup model validation using jjavascript

how to validation using javascript popup model in codeigniter
login code shown in below
below code shown in login page i am trying so many times ways for validation but i am not getting
<form id="register-form" action="<?php echo base_url(); ?>Index.php/Login_cntrl/login" method="POST" >
<div class="field-wrap">
<label class="view-label">Email Address</label>
<input type="email" placeholder="Email Address" name="email" id="email" class="input-control" value=""/>
</div>
<div class="field-wrap">
<input type="password" placeholder="Password" name="password" id="password" value="" />
<a href="javascript:void(0)" class="btn btn-link btn-nobg" id="btn-show-forgot" >Forgot ?</a>
</div>
<div class="field-wrap">
<button type="submit" class="btn btn-submit" name="ulogin" id="ulogin" value="ulogin" >Login</button>
</div>
<div class="field-wrap">
NEW User? Sign up
</div>
</form>
validation.js
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>js/validation.js"></script>
$(function() {
$("#register-form").validate({
// Specify the validation rules
rules: {
email: {
required: true,
email: true
},
password: {
required: true,
maxlength: 8
}
},
// Specify the validation error messages
messages: {
email: "Please enter your email",
password: "Please enter your password",
},
submitHandler: function(form) {
form.ulogin();
}
});
});

The JavaScript code below is working.
$(function() {
// Setup form validation on the #register-form element
$("#btn-show-forgot").validate({
//ignore: [],
// Specify the validation rules
rules: {
email: {
required: true,
email: true
}
},
// Specify the validation error messages
messages: {
email: "Please enter your firstname",
},
submitHandler: function(form) {
form.submit();
}
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="http://formvalidation.io/bundles/0a3b9034e109d88d72f83c9e6c9d13b7.js"></script>
<form id="contactForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Full name</label>
<div class="col-xs-4">
<input type="text" class="form-control" name="fullName" />
</div>
<div class="col-xs-5 messageContainer"></div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Email</label>
<div class="col-xs-4">
<input type="text" class="form-control" name="email" />
</div>
<div class="col-xs-5 messageContainer"></div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Title</label>
<div class="col-xs-4">
<input type="text" class="form-control" name="title" />
</div>
<div class="col-xs-5 messageContainer"></div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Content</label>
<div class="col-xs-4">
<textarea class="form-control" name="content" rows="5"></textarea>
</div>
<div class="col-xs-5 messageContainer"></div>
</div>
<div class="form-group">
<div class="col-xs-9 col-xs-offset-3">
<button type="submit" class="btn btn-default">Validate</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#contactForm').formValidation({
framework: 'bootstrap',
err: {
container: function($field, validator) {
// Look at the markup
// <div class="col-xs-4">
// <field>
// </div>
// <div class="col-xs-5 messageContainer"></div>
return $field.parent().next('.messageContainer');
}
},
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
fullName: {
validators: {
notEmpty: {
message: 'The full name is required and cannot be empty'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required and cannot be empty'
},
emailAddress: {
message: 'The email address is not valid'
}
}
},
title: {
validators: {
notEmpty: {
message: 'The title is required and cannot be empty'
},
stringLength: {
max: 100,
message: 'The title must be less than 100 characters long'
}
}
},
content: {
validators: {
notEmpty: {
message: 'The content is required and cannot be empty'
},
stringLength: {
max: 500,
message: 'The content must be less than 500 characters long'
}
}
}
}
});
});
</script>
or check this link
http://formvalidation.io/examples/showing-message-custom-area/callback/bootstrap.html
According to my form i have done modifications, but it's not working and let me know if something went wrong
<script>
$(document).ready(function() {
$('#contactForm').formValidation({
framework: 'bootstrap',
err: {
container: function($field, validator) {
// Look at the markup
// <div class="col-xs-4">
// <field>
// </div>
// <div class="col-xs-5 messageContainer"></div>
return $field.parent().next('.messageContainer');
}
},
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields:
email: {
validators: {
notEmpty: {
message: 'The email address is required and cannot be empty'
}
}
}
}
});
</script>

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.

Jquery validator plugin is not validating using complex names

I have the following content of a form.
<form id="edit-form" action="" method="post">
<div class="row">
<div class="form-group col-md-2 col-xs-2 col-lg-2">
<label for="id_first_name">First Name:<span class="help-inline"> *</span></label>
<input class="form-control input-sm" id="id_customer-first_name" maxlength="150" name="customer-first_name" type="text" value="Neville">
</div>
<div class="form-group col-md-2 col-xs-2 col-lg-2">
<label for="id_middle_name">Middle Name:</label>
<input class="form-control input-sm" id="id_customer-middle_name" maxlength="150" name="customer-middle_name" type="text">
</div>
<div class="form-group col-md-2 col-xs-2 col-lg-2">
<label for="id_last_name">Last Name:<span class="help-inline"> *</span></label>
<input class="form-control input-sm" id="id_customer-last_name" maxlength="200" name="customer-last_name" type="text" value="Sarginson">
</div>
<div class="form-group col-md-2 col-xs-2 col-lg-2">
<label for="id_telephone">Telephone:<span class="help-inline"> *</span></label>
<input class="form-control input-sm" id="id_customer-telephone" maxlength="25" name="customer-telephone" placeholder="(XXX) XXX-XXXX" type="text">
</div>
<div class="form-group col-md-2 col-xs-2 col-lg-2">
<label for="id_mobile">Mobile No:</label>
<input class="form-control input-sm" id="id_customer-mobile" maxlength="25" name="customer-mobile" type="text">
</div>
<div class="form-group col-md-2 col-xs-2 col-lg-2">
<label for="id_work_phone">Work Phone No:</label>
<input class="form-control input-sm" id="id_customer-work_phone" maxlength="25" name="customer-work_phone" type="text">
</div>
</div>
</form>
I use jquery validation plugin to validate the inputs of the form in the following way.
$('#edit-form').validate({
/* #validation states + elements
------------------------------------------- */
errorClass: "state-error",
validClass: "state-success",
errorElement: "em",
/* #validation rules
------------------------------------------ */
rules: {
"customer-first_name": {
required: true
},
"customer-last_name": {
required: true
},
"customer-email": {
required: true,
email: true
},
"customer-telephone": {
required: true
}
},
/* #validation error messages
---------------------------------------------- */
messages:{
"customer-first_name": {
required: 'Enter first name'
},
"customer-last_name": {
required: 'Enter last name'
},
"customer-email": {
required: 'Enter email address',
email: 'Enter a VALID email address'
},
"customer-telephone": {
required: 'Enter patient\'s telephone number'
}
},
/* #validation highlighting + error placement
---------------------------------------------------- */
highlight: function(element, errorClass, validClass) {
$(element).closest('.field').addClass(errorClass).removeClass(validClass);
},
unhighlight: function(element, errorClass, validClass) {
$(element).closest('.field').removeClass(errorClass).addClass(validClass);
},
errorPlacement: function(error, element) {
if (element.is(":radio") || element.is(":checkbox")) {
element.closest('.option-group').after(error);
} else {
error.insertAfter(element.parent());
}
}
});
The proper js library is included but still it won't validate. Am I doing something wrong?

Yes, correct, you must surround complex names with quotes.
However, your code, as you've presented it to us, is working: http://jsfiddle.net/7pmc6q9c/
....
rules: {
"customer-first_name": {
required: true
},
"customer-last_name": {
required: true
},
"customer-email": {
required: true,
email: true
},
"customer-telephone": {
required: true
}
},
....
Your customer-first_name and customer-last_name fields already have values set in the HTML so there is nothing to validate unless the user blanks them out.
Your customer-email field does not exist in the HTML so validation ignores it.
Your customer-telephone field is being validated exactly as you've specified.