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

});
Share:
27,875
Grant Noel
Author by

Grant Noel

Updated on July 09, 2022

Comments

  • Grant Noel
    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;
        }
    
        });
    
    });