Question

我有4个文本框。我想根据bewlow标准进行验证： -

1）。如果第一个文本框值不为空，而另一个空白则为空白文本框上的addclass错误。

2）。如果第二个文本框值不为空，并且第一个，第三个和第四个文本框值为空白，而不是该空白文本框上的addclass错误。

3）。如果前两个文本框值不为空，而另一个textox值为空白，则该空白文本框上的addClass值为空。

4）。如果第一个和第三个文本框值不为空，并且第二个和第四个文本框值为空，而不是该空白文本框上的addclass错误。

5）。如果3个文本框值不为空，并且该空白文本框上的一个文本框值空白而不是addclass错误。

这是我的jquery验证码： -

$(".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>

Answer 1

您可以遍历所有输入框，并检查是否有任何输入字段填充了所有其他空输入框的添加错误类值。

试试这个：

$(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;
 });
});

Answer 2

为此使用jquery验证插件。它的实施快速简便。

会是这样的

$(form).validate()

如果你想添加一些规则，比如minlength / maxlength等。

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

客户端验证根据按钮单击时的空文本框触发

2 个答案: