I have a problem using bootstrap select plugin and jQuery validation. when i select value, error message This field is required not remove While normal validation(without bootstrap select plugin) after select value error message auto remove. how to fix this problem?
JSFIDDLE
HTML:
<form id="myform"> <----With Select Plugin
<select name="year" class="selectpicker">
<option value="">Year</option>
<option value="1">1955</option>
<option value="2">1956</option>
</select>
<br/>
<input type="submit" />
</form>
<form id="myform1"> <----Without Select Plugin
<select name="fruit">
<option value="">Year</option>
<option value="1">1955</option>
<option value="2">1956</option>
</select>
<br/>
<input type="submit" />
</form>
JS:
$(document).ready(function () {
$('.selectpicker').selectpicker();
$('#myform').validate({ // initialize the plugin
ignore: [],
rules: {
year: {
required: true
}
},
errorPlacement: function(error, element) {
if (element.attr("name") == "year") {
error.insertAfter(".bootstrap-select");
} else {
error.insertAfter(element);
}
},
submitHandler: function (form) { // for demo
alert('valid form submitted'); // for demo
return false; // for demo
}
});
});
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#myform1" ).validate({
rules: {
fruit: {
required: true
}
}
});
You need to check the validity on change
$('.selectpicker').selectpicker().change(function(){
$(this).valid()
});
Demo: Fiddle
Try this
$('select').change(function(){
if ($(this).val()!="")
{
$(this).valid();
}
});
Here is the Fiddle
Related
There is a button labeled NEWFORM to create a new form when clicked. Each form has a submit button. When the submit button of each form is clicked, the values of that form will be sent via AJAX. My code works well the first time, but when a new form is created and submitted, all of the values of all forms will send together.
Here is my snippet:
$(document).ready(function() {
$(".newform").click(function() {
$(".MyForm")
.eq(0)
.clone()
.show()
.insertAfter(".MyForm:last");
});
$(document).on('click', '.MyForm button[type=submit]', function(e) {
e.preventDefault() // To make sure the form is not submitted
$('.MyForm').each(function() {
console.log($(this).serialize())
$.ajax(
$(this).attr('action'),
{
method: $(this).attr('method'),
data: $(this).serialize()
}
)
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<span class="newform">NEWFORM+</span>
<div class="all">
<form class="MyForm" method="post">
<input type="text" placeholder="name" value="Aynaz" name="a1" />
<select name="Avg">
<option value="1">1</option>
<option value="2">2</option>
</select>
<button type="submit">Submit</button>
</form>
</div>
You iterate all ".MyForm" objects in your solution, so all of them submitted, you need to determine correct form in onClick first, and then submit it:
$(document).ready(function() {
$(".newform").click(function() {
$(".MyForm")
.eq(0)
.clone()
.show()
.insertAfter(".MyForm:last");
});
$(document).on('click', '.MyForm button[type=submit]', function(e) {
e.preventDefault() // To make sure the form is not submitted
var $frm = $(this).closest('.MyForm');
console.log($frm.serialize());
$.ajax(
$frm.attr('action'),
{
method: $frm.attr('method'),
data: $frm.serialize()
}
);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<span class="newform">NEWFORM+</span>
<div class="all">
<form class="MyForm" method="post">
<input type="text" placeholder="name" value="Aynaz" name="a1" />
<select name="Avg">
<option value="1">1</option>
<option value="2">2</option>
</select>
<button type="submit">Submit</button>
</form>
</div>
$(document).ready(function() {
$(".newform").click(function() {
$(".MyForm")
.eq(0)
.clone()
.show()
.insertAfter(".MyForm:last");
});
$(document).on('click', '.MyForm button[type=submit]', function(e) {
e.preventDefault() // To make sure the form is not submitted
var $this = $(this).closest("form");
console.log($this.serialize())
$.ajax(
$(this).attr('action'),
{
method: $this.attr('method'),
data: $this.serialize()
}
)
});
});
You could do this rather
$(document ).on('submit', '.myForm', function(e) {
e.preventDefault()
$.ajax({
type: 'post',
data: $(this).serialize(),
url: 'submit.php'
})
})
The problem is your contextual application of $(this)
I have form with jQuery validation defined as follows.
//#costCalculation is a form id
$('#costCalculation').validate({
onsubmit: false, //To prevent validation during form submit
errorClass: "my-error-class",
rules: {
adSizeFull: {
required: true
},
fullAdNo: {
required: true
}
},
messages: {
adSizeFull: "Please select Full adsize",
fullAdNo: "Please select total Ads(Full)"
},
submitHandler: function (form) { // for demo
//alert('valid form');
return true;
}
});
I have a form with select box like this
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="control-label col-xs-4">Ads(Full):</label>
<div class="col-xs-8">
<select name="adSizeFull" id="fullads-list" class="form-control" onchange="fullAdSizeChange()">
<option value="">--Select--</option>
</select>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="control-label col-xs-4" for="fullAdNo">#:</label>
<div class="col-xs-8">
<select name="fullAdNo" id="fulladnos-list" class="form-control" onchange="fullAdNoChange()">
<option value="">--Select--</option>
</select>
</div>
</div>
</div>
</div>
I would like to remove validation in the following scenario JS
function fullAdSizeChange() {
var adSizeFull = $("#fullads-list").val();
var fullAdNo = $("#fulladnos-list").val();
if(adSizeFull == "" && fullAdNo == "") {
$("#fullads-list").rules("remove", "required");
$("#fulladnos-list").rules("remove", "required");
}
}
How to remove the validation from specific elements if the form is specified as above??
I haven't copied the entire code. There may problems in syntaxes. I need guidelines only to implement this
jQuery Validate actually directly supports dependency expressions.
All you need to do is change your validate options like this:
parent: {
required: function(element) {
return $("#age").val() < 13;
// Makes "parent" required only if age is below 13.
}
Full Example:
$( "#myform" ).validate({
rules: {
age: {
required: true,
min: 3
},
parent: {
required: function(element) {
return $("#age").val() < 13;
}
}
}
});
}
just add the required class in both select box class no need to add change event
<select name="adSizeFull" id="fullads-list" class="form-control required" onchange="fullAdSizeChange()">
<option value="">--Select--</option>
</select>
I'm working with a multi-step form. The fields are styled by bootstrap and the validations are done with jQuery. Right now only the text-fields are validating (like name, last name) but not: email, tel, any radio buttons or selectors etc. I need these forms to validate as well. But I also need this form to make an HTTP POST (probably with PHP, upon click of the next, and submit button which I will address in another question.
Here are a couple of my fields in html
<div class="form-bottom">
<div class="form-group">
<label for="sel2">choose an option (Choose One)</label>
<select class="form-control input-lg" id="sel2">
<option value="" disabled="" selected="" style="display: none;">Select One</option>
<option>First Option</option>
<option>An Option</option>
<option>Another Option</option>
</select>
</div>
<div class="form-group">
<label for="pwd">Email</label>
<input type="Email" class="form-control input-lg" id="pwd" placeholder="johndoe#gmail.com">
</div>
Below is the validating jQuery method:
$('.registration-form fieldset:first-child').fadeIn('slow');
$('.registration-form input[type="text"], .registration-form input[type="password"], .registration-form textarea').on('focus', function() {
$(this).removeClass('input-error');
});//.registration-form input[type="tel-lg"],
$('.registration-form .btn-next').on('click', function() {
var parent_fieldset = $(this).parents('fieldset');
var next_step = true;
parent_fieldset.find('input[type="text"], input[type="password"], textarea').each(function() {
if( $(this).val() == "" ) {
$(this).addClass('input-error');
next_step = false;
}
else {
$(this).removeClass('input-error');
}
});
if( next_step ) {
parent_fieldset.fadeOut(400, function() {
$(this).next().fadeIn();
});
}
});
I would think just adding something, at least the email field input[type="email"], to the top line would do this, but it does not.
Note: I wound up switching to the actual jQuery-validator pluggin. It was much easier to use, and I would suggest it for anyone focusing on front-end Validations.
http://jqueryvalidation.org/documentation/
EX:
$('.form3').validate({ // initialize plugin
// ignore:":not(:visible)",
rules: {
Surgery_Year: {
required: true,
number: true,
},
Has_Surgery: {
required: true,
number: false,
},
Has_Rev_Surgery: {
required: true,
number: false,
},
Rev_Surgery_Year: {
required: true,
number: true,
},
}
I have multiple forms on a page and I'm trying to validate them with jQuery. The validation section is working, however, I can't figure out where to put the ajax if the form is valid.
Update: I have no idea how many forms there will be as these are dynamically generated.
<p>reload</p>
<div id="messages">
<div id="message">
<ul></ul>
</div>
</div>
<form action="#" method="post" class="form">
<select name="foo" class="required">
<option value="">Select...</option>
<option value="foo">Foo</option>
</select>
<input type="text" name="bar" class="required">
<input type="submit" value="submit">
</form>
<form action="#" method="post" class="form">
<select name="foo" class="required">
<option value="">Select...</option>
<option value="snafoo">Snafoo</option>
</select>
<input type="text" name="bar" class="required">
<input type="submit" value="submit">
</form>
<script src="//code.jquery.com/jquery.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script>
$('.form').each(function() {
$(this).validate({
submitHandler:function(form) {
var foo = $(form).find('select[name=foo]').val();
var bar = $(form).find('input[name=bar]').val();
form.submit();
},
rules: {
foo: {
required: true
},
bar: {
required: true
}
},
messages: {
foo: {
required: 'Please select a foo'
},
bar: {
required: 'Please enter a bar'
}
},
errorContainer: $('#messages'),
errorLabelContainer: $('#messages ul'),
wrapper: 'li',
// callback functions to work with bootstrap
highlight:function(element) {
$(element).closest('.form-group').addClass('has-error');
},
unhighlight:function(element) {
$(element).closest('.form-group').removeClass('has-error');
}
});
});
// if the form is valid, do some ajax...
$('.form').on('submit', function(){
if($(this).valid()){
// testing...
alert(foo);
$.ajax({
type: 'POST',
url: 'script.php',
data: 'foo=' + foo,
cache: false,
success: function(data){
// do stuff...
}
});
}
return false;
});
</script>
foo is undefined in your submit event. Need to add the following string:
$('.form').on('submit', function(){
var foo = $('select', this).val();
...
});
Ok - I have a modal dialog form using a jquery-ui modal dialog, and the dialog buttons are supposed to submit the form.
When the Add Utility button is clicked, the form.submit action is called, but neither the invalidHandler, submitHandler, or notNone methods are ever called. The form is also never submitted to the webservice, so its not like it is just skipping over the validation portion.
Any help to figure out why the validation isn't running would be greatly appreciated! Thanks!
Javascript:
$(document).ready(function () {
$.validator.addMethod('notNone',
function (value, element) { return (value != 'none');},
'Please select an option.');
$("#modal-form-addUtility").validate({
errorContainer: "#errorblock-div1, #errorblock-div2",
errorLabelContainer: "#errorblock-div2 ul",
wrapper: "li",
rules: {
utilitySelectComboBox: {
notNone: true
}
},
invalidHandler: submitHandler: function (form) {
alert("Invalid");
},
submitHandler: function (form) {
alert("Submitted");
}
});
$('#AddUtility').click(function () {
$("#AddUtilityDialog").dialog("open");
});
$("#AddUtilityDialog").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Add Utility": function () { $("#modal-form-addUtility").submit(); },
Cancel: function () {
$("#modal-form-addUtility").resetForm();
$(this).dialog("close");
}
}
});
});
HTML Code:
<input type="button" id="AddUtility" name="AddUtility" value="Add"/>
<div id="AddUtilityDialog" class="ui-widget" title="Add New Utility">
<div class="ui-widget ui-helper-hidden" id="errorblock-div1">
<div class="ui-state-error ui-corner-all" style="padding: 0pt 0.7em;" id="errorblock-div2" style="display:none;">
<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: 0.3em;"></span>
<strong>Alert:</strong> Errors detected!</p>
<ul></ul>
</div>
</div>
<form action="/TextManager.svc/AddUtility" name="modal-form-addUtility" id="modal-form-addUtility" method="POST">
<fieldset>
<label>Select Utility </label>
<select id="utilitySelectComboBox">
<option value="none">Select one...</option>
<option value="5506">PEE DEE Electric - 5506</option>
<option value="5505">Mower County Electric - 5505</option>
</select>
</fieldset>
</form>
</div>