Jquery Validation Rules with If/ Else statement
27,875
Solution 1
Assuming that id is a id of a textbox. you can do this:
name : {
required : $("#id").val().length <= 0
},
zipcode : {
required : $("#id").val().length <= 0
},
Solution 2
You can pass the value of required as a function as given below, assuming id
is the name of a input field
var $id = $('input[name="id"]')
$("#artist_create_event").validate({
// Rules for form validation
rules: {
artist_create_event_name: {
required: true
},
artist_create_event_desc: {
required: true
},
id: {
required: true
},
name: {
required: function () {
return $id.val().length > 0;
}
},
zipcode: {
required: function () {
return $id.val().length > 0;
}
},
venue_name: {
required: true
},
city: {
required: true
},
state: {
required: true
},
location: {
required: true
},
event_address: {
required: true
}
},
// Messages for form validation
messages: {
artist_create_event_name: {
required: 'Enter Event Name'
},
artist_create_event_desc: {
required: 'Enter Event Description'
},
name: {
required: 'Enter Venue Name'
},
zipcode: {
required: 'Please enter Zipcode/Postalcode'
},
venue_name: {
required: 'Enter Venue Name'
},
city: {
required: 'Please enter City'
},
state: {
required: 'Please enter State'
},
location: {
required: 'Please enter Country'
},
event_address: {
required: 'Please enter Address'
}
},
// Do not change code below
errorPlacement: function (error, element) {
error.insertAfter(element.parent());
},
// Ajax form submition
submitHandler: function () {
$('#artist_create_event').hide(0);
$('#art_event_message').hide(0);
$.ajax({
url: 'artist_update_event.php',
type: 'POST',
dataType: 'json',
data: {
artist_create_event_name: $('#artist_create_event_name').val(),
artist_create_event_desc: $('#artist_create_event_desc').val(),
name: $('#name').val(),
city: $('#city').val(),
state: $('#state').val(),
location: $('#location').val(),
zipcode: $('#zipcode').val(),
event_address: $('#event_address').val(),
event_address2: $('#event_address2').val()
},
success: function (data) {
$('#art_event_message').removeClass().addClass((data.error === true) ? 'error' : 'success')
.text(data.msg).show(500);
if (data.error === true) {
if (data.goto == 1) {
delete json;
} else {
$('#artist_create_event').show(500);
delete json;
}
}
if (data.error === false) {
$('#artist_create_event').show(500);
delete json;
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
$('#art_event_message').removeClass().addClass('error')
alert('The error was: ' + errorThrown);
alert('The error was: ' + XMLHttpRequest);
alert('The error was: ' + textStatus);
// .text('response.Text').show(500);
$('#artist_create_event').show(500);
}
});
return false;
}
});
Author by
Grant Noel
Updated on July 09, 2022Comments
-
Grant Noel almost 2 years
This code works but I need it to basically do an If Else on the id field. If the id length is >0 then do not check name, zipcode as required. If the id is not > 0 then check name, zipcode, etc as required. Your suggestions are welcomed. Thanks,
runAllForms(); $(function () { $("#artist_create_event").validate({ // Rules for form validation rules : { artist_create_event_name : { required : true }, artist_create_event_desc : { required : true }, id : { required : true }, name : { required : true }, zipcode : { required : true }, venue_name : { required : true }, city : { required : true }, state : { required : true }, location : { required : true }, event_address : { required : true } }, // Messages for form validation messages : { artist_create_event_name : { required : 'Enter Event Name' }, artist_create_event_desc : { required : 'Enter Event Description' }, name : { required : 'Enter Venue Name' }, zipcode : { required : 'Please enter Zipcode/Postalcode' }, venue_name : { required : 'Enter Venue Name' }, city : { required : 'Please enter City' }, state : { required : 'Please enter State' }, location : { required : 'Please enter Country' }, event_address : { required : 'Please enter Address' } }, // Do not change code below errorPlacement : function(error, element) { error.insertAfter(element.parent()); }, // Ajax form submition submitHandler: function() { $('#artist_create_event').hide(0); $('#art_event_message').hide(0); $.ajax({ url : 'artist_update_event.php', type : 'POST', dataType : 'json', data: { artist_create_event_name: $('#artist_create_event_name').val(), artist_create_event_desc: $('#artist_create_event_desc').val(), name: $('#name').val(), city: $('#city').val(), state: $('#state').val(), location: $('#location').val(), zipcode: $('#zipcode').val(), event_address : $('#event_address').val(), event_address2 : $('#event_address2').val() }, success : function(data){ $('#art_event_message').removeClass().addClass((data.error === true) ? 'error' : 'success') .text(data.msg).show(500); if (data.error === true) { if (data.goto == 1) { delete json; } else { $('#artist_create_event').show(500); delete json; } } if (data.error === false) { $('#artist_create_event').show(500); delete json; } }, error : function(XMLHttpRequest, textStatus, errorThrown) { $('#art_event_message').removeClass().addClass('error') alert('The error was: '+errorThrown); alert('The error was: '+XMLHttpRequest); alert('The error was: '+textStatus); // .text('response.Text').show(500); $('#artist_create_event').show(500); } }); return false; } }); });