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

Question

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

1).如果第一个文本框值不为空，另外三个为空，则该空白文本框出现 addclass 错误。

2).如果第二个文本框值不为空且第 1、第 3 和第 4 个文本框值为空，则该空白文本框出现 addclass 错误。

3).如果前两个文本框值不为空而另一个文本框值为空，则该空白文本框上的 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

为此使用 jquery 验证插件。实施起来既快速又容易。

会是这样的

$(form).validate()

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

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

Answer 2

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

试试这个：

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

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

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

javascript

validation

jquery

textbox