Client-side validation fire according to empty textboxes on button click

Question

I have 4 text boxes. I want to validate according to bewlow criteria:-

1). IF first textbox value not blank and anotherthree are blank than addclass error on that blank textbox.

2). If second textbox value not blank and 1st, 3rd and 4th textbox valueare blank than addclass error on that blank textbox.

3). If first two textbox value are not blank and another textox value are blank than addClass error on that blank textbox.

4). If First and third textbox value are not blank and 2nd and 4th textbox value are blank than addclass error on that blank textbox.

5).If 3 textboxs value are not blank and one textbox value blank than addclass error on that blank textbox.

This is My jquery validation code:-

$(".submit_data").click(function(){
    input1 = $("#data1").val();
    input2 =  $("#data2").val();
    input3= $("#data3").val();
    input4= $("#data4").val();

    if(input1 == "" && input2 == "" && input3 == "" && input3 == "")
    {
       $(".data-form").addClass('required');
       $(".data-form").addClass('error');
       $(".new-data-form").addClass('required');
       $(".new-data-form").addClass('error');
    }


    if( input1 != "" && input2 == "" && input3 == "" && input3 == "" )
    {
      $("#data2").addClass("error");
      $("#data3").addClass("error");
      $("#data4").addClass("error");
      return false;
    }
});

HTML:-

<div id="painting_form" class="painting-form-wrap">
            <div class="form-group">
              <label class="col-sm-2 control-label">Input 1</label>
              <div class="col-sm-10">
                <input type="text" name="data1" value="" id="data1" class="form-control painting-form1">

              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label">Input 2</label>
              <div class="col-sm-10">
                <input type="text" name="data2" value="data2" id="input-ceilheight" class="form-control painting-form1">

              </div>
            </div>

            <div class="form-group">
              <label class="col-sm-2 control-label">Input 3</label>
              <div class="col-sm-10">
                <input type="text" name="data3" value="" id="data3" class="form-control painting-form1">

              </div>
            </div>

            <div class="form-group">
              <label class="col-sm-2 control-label">Input 4</label>
              <div class="col-sm-10">
                <input type="text" name="data4" value="" id="data4" class="form-control painting-form1">

              </div>
            </div>
      </div>

it simply means if any of the textbox is not blank add error class in others if they are blank... — Dhara Parmar, May 14 '16 at 07:50
i have posted answer below..check that.. i hope it will be useful to you — Dhara Parmar, May 14 '16 at 09:12
@KimJones You don't necessarily need jQuery to check for a blank textbox. If HTML5 validation is supported, you just need to add the `required` attribute. Check my other answer at http://stackoverflow.com/questions/37191576/i-do-have-a-form-wherein-if-a-user-enters-input-it-should-check-for-negative-or/37192371#37192371 — Chintan, May 14 '16 at 09:16
Please do not use the [tag:jquery-validate] tag if the question has nothing to do with this plugin. Edited. Thanks. — Sparky, May 14 '16 at 15:27

score 1 · Accepted Answer · answered May 14 '16 at 09:11

You can loop through all input boxes and check if any of the input field is filled with value the add error class to all other empty input boxes.

Try this:

$(document).ready(function() {
 $(".submit_data").click(function(){
    flag = 0; // check if eny input box is filled with value or not
    $("input[type=text]").each(function() {
        if($(this).val() != '') {
            flag = 1; // set flag one if any of the inputbox has value entered
        }
    });
    if(flag == 0) { // if flag is  0 means all input are empty then remove error class from all inputs
        $("input[type=text]").each(function() {
             $(this).removeClass('required');
              $(this).removeClass('error');
        });
    }
    if(flag == 1) { // if any of the input box is filled with value
        $("input[type=text]").each(function() {
            if($(this).val() == '') {
                $(this).addClass('required'); // add error class to empty inputboxes
                $(this).addClass('error');
            } else {
                $(this).removeClass('error'); // remove error class if inputbox has value
            }
        });
    }
    return false;
 });
});

score 0 · Answer 2 · answered May 14 '16 at 08:05

Use jquery validation plugin for this. It's quickly and easy to implement.

Will be something like this

$(form).validate()

If you want to add some rules, like minlength/maxlength and so on .

// Try this
$(form).validate(rules:{
   inputname: {
     minlength: 8 
   }
})

Client-side validation fire according to empty textboxes on button click

2 Answers2