Jquery Validation Rules with If/ Else statement

Question

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

    });

});

Higdon

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

Nally

A Ternery operator never needs ? false : true like this — it can instead be expressed simply as a boolean { required : $("#id").val().length <= 0 ), – Urgent

The id is a hidden field. If the user selects the autocomplete then id has a value, else id is blank. If it has a value, then only pass the id to ajax, if there is no value, then pass everything else. So I need to do an if I suppose for rules and messages, but also need to only pass the id or pass everything else using json. Thanks – Higdon

several irregularities here... rules are dependent on name not id and plugin has depends methods. Hidden fields can not be set to required. You can't set required as shown or it will be set at run time – Invasive

Well, if it is hidden field, it should work that way.. Have you checked the answer? @Grant Noel – Nally

HI Masum7, yes it appears to be working in the rules. Thanks. I also need to do something similar in the ajax call passing the information through json. I only want to pass the id if set, otherwise pass everything else. Any ideas. Thanks, Grant – Higdon

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

});

Reviel

@GrantNoel you may have to check $id.val().length > 0 based on what you need... like whether to check anything is entered in id field or it doesn't have a value '' or 0 – Reviel

@GrantNoel if the passed function returns true the field is required else not required – Reviel

Thanks It working well. name: { required: function () { return $id.val().length > 0; } }, – Melvinmelvina