javascript - jQuery 表单验证仅在特定输入上失败

Question

我有一个相当简单的验证函数，仅检查输入是否为空。我在六种不同的形式中使用它，除了一个特定的输入 id="driver_first_name" 之外，它似乎在任何地方都可以工作。无法弄清楚为什么它在那里失败。

如果我将所有字段留空，我会在所有字段上收到错误，并且在我尝试过的任何组合中通常都是正确的，除了 driver_first_name 在我填写除 driver_first_name< 之外的所有内容的情况下 表单无论如何都会提交。

对这里可能发生的事情有什么见解吗？

谢谢!

我的验证功能是这样的:

    function validateForm(form, fields) { //add exit anbimation and reset the container state
    $(".form-input-error").remove();
    var result=false;
    $.each( fields.rules, function( key, value ) {
        if(!$("#"+key+"").val()){
            $("#"+key+"").addClass("form-error");
            $( "<div class='form-input-error'>"+value.message+"</div>" ).insertBefore("#"+key+"");
             result = false;
            //console.log(this.val());
        }
        else{
            $("#"+key+"").removeClass("form-error");
             result = true;
        }   
});
     return result;
}

我在提交触发器上调用验证，对于不应该为空的字段通常如下所示:

$(".app-canvas").on('click', ".submitNewDriver", function () {//list all drivers trigger
            var checkInputs = {
        rules: {
            driver_first_name: {
                message: "First Name is Required"
            },
            driver_last_name: {
                message: "Last Name is Required"
            },
            driver_address_street: {
                message: "street is Required"
            }
        }
    };  
    if(validateForm($("#addDriverForm"),checkInputs) == true){
    console.log("form submit");
        addNewDriver();
    }
    else{
        console.log("form errors");
    }
    });

我的完整 HTML 格式是

   <div class="form-wrapper">

     <form id="addDriverForm" class="post-form" action="modules/add_driver.php" method="post"> 

<div class="form-row">
<label for="driver_first_name">First Name:</label> 
<input id="driver_first_name" placeholder="John" type="text" name="driver_first_name">
</div>

<div class="form-row">
<label for="driver_last_name">Last Name:</label> 
<input id="driver_last_name" placeholder="Smith" type="text" name="driver_last_name">
</div>

<div class="form-row">
<label for="driver_address_street">Street</label> 
<input id="driver_address_street" placeholder="123 Main St." type="text" name="driver_address_street">
</div>

<div class="form-row">
<label for="driver_address_city">City</label> 
<input id="driver_address_city" placeholder="Chicago" type="text" name="driver_address_city">
</div>

<div class="form-row">
<label for="driver_address_state">State</label> 
<input id="driver_address_state" placeholder="IL" type="text" name="driver_address_state">
</div>


<div class="form-row">
<label for="driver_address_zip">Zip</label> 
<input id="driver_address_zip" placeholder="60164" type="number" name="driver_address_zip">
</div>

<div class="form-row">
<label for="driver_telephone">Zip</label> 
<input id="driver_telephone" placeholder="60164" type="tel" name="driver_telephone">
</div>

<div class="form-row">
<label for="driver_email">E-Mail</label> 
<input id="driver_email" placeholder="60164" type="email" name="driver_email">
</div>


<div class="form-row"><label for="driver_payment_type">Settlement Type</label>
<select id="driver_payment_type" name="driver_payment_type">
  <option value="flat">Flat Rate</option>
  <option value="percent">Percent</option>
  <option value="mile">Per Mile</option>
</select></div>


<div class="form-row">
    <label for="driver_license_number">Lisence #</label>
    <input id="driver_license_number" placeholder="ex:D400-7836-2633" type="number" name="driver_license_number">
</div>

<div class="form-row">
    <label for="driver_license_expiration">Lisence Expiration Date</label>
    <input id="driver_license_expiration" type="date" name="driver_license_expiration">
</div>

<div class="form-row">
    <label for="driver_licence_image">Lisence Copy</label>
    <input id="driver_licence_image" type="file" name="driver_licence_image">
</div>

<div class="form-row">
    <label for="driver_medical_certificate_expiration">Medical Certificate Expiration</label>
    <input id="driver_medical_certificate_expiration" type="date" name="driver_medical_certificate_expiration">
</div>

<div class="form-row">
    <label for="driver_medical_certificate_image">Medical CXertificate Copy</label>
    <input id="driver_medical_certificate_image" type="file" name="driver_medical_certificate_image">
</div>

<div class="form-row">
    <label class="driverCheckbox" for="driver_access_mobile_app">Allow Mobile Access</label>
    <input id="driver_access_mobile_app" checked value="1" type="checkbox" name="driver_access_mobile_app">
</div>
<div class="form-row"></div>
<div class="driver-access-copnditional">
<div class="form-row">
<label for="driver_username">Username</label> 
<input id="driver_username" placeholder="JohSmi" type="text" name="driver_username">
</div>


<div class="form-row">
<label for="driver_password">Password</label> 
<input id="driver_password" placeholder="***" type="password" name="driver_password">
</div>
</div>

<div class="clear"></div>
<div class="submitNewUnit button green"><i class="material-icons">save</i>Submit</div>
</form>
</div>

Answer 1

你的验证逻辑有点困惑。这就是正在发生的事情:

1. #driver_first_name 被验证为无效...result 设置为 false
2. #driver_last_name 已验证为有效...result 设置为 true
3. #driver_address_street 已验证为有效...result 设置为 true

毕竟代码认为表单是有效的。仅当最后一个字段被验证为无效时，您才会阻止提交表单。

改变你的逻辑，假设表单从一开始就是有效的。如果任何字段无效，则将其设置为 false。

我在您的代码中也没有看到任何实际阻止表单提交的内容，因此我还添加了 e.preventDefault()

function validateForm(form, fields) { //add exit anbimation and reset the container state
  $(".form-input-error").remove();
  var result = true;
  $.each(fields.rules, function(key, value) {
    if (!$("#" + key + "").val()) {
      $("#" + key + "").addClass("form-error");
      $("<div class='form-input-error'>" + value.message + "</div>").insertBefore("#" + key + "");
      result = false;
      //console.log(this.val());
    } else {
      $("#" + key + "").removeClass("form-error");
    }
  });
  return result;
}

$(".app-canvas").on('click', ".submitNewDriver", function(e) { //list all drivers trigger
  var checkInputs = {
    rules: {
      driver_first_name: {
        message: "First Name is Required"
      },
      driver_last_name: {
        message: "Last Name is Required"
      },
      driver_address_street: {
        message: "street is Required"
      }
    }
  };
  if (validateForm($("#addDriverForm"), checkInputs) == true) {
    console.log("form submit");
  } else {
    e.preventDefault();
    console.log("form errors");
  }   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="app-canvas form-wrapper">

  <form id="addDriverForm" class="post-form" action="" method="post">

    <div class="form-row">
      <label for="driver_first_name">First Name:</label>
      <input id="driver_first_name" placeholder="John" type="text" name="driver_first_name">
    </div>

    <div class="form-row">
      <label for="driver_last_name">Last Name:</label>
      <input id="driver_last_name" placeholder="Smith" type="text" name="driver_last_name">
    </div>

    <div class="form-row">
      <label for="driver_address_street">Street</label>
      <input id="driver_address_street" placeholder="123 Main St." type="text" name="driver_address_street">
    </div>

    <div class="form-row">
      <label for="driver_address_city">City</label>
      <input id="driver_address_city" placeholder="Chicago" type="text" name="driver_address_city">
    </div>

    <div class="form-row">
      <label for="driver_address_state">State</label>
      <input id="driver_address_state" placeholder="IL" type="text" name="driver_address_state">
    </div>


    <div class="form-row">
      <label for="driver_address_zip">Zip</label>
      <input id="driver_address_zip" placeholder="60164" type="number" name="driver_address_zip">
    </div>

    <div class="form-row">
      <label for="driver_telephone">Zip</label>
      <input id="driver_telephone" placeholder="60164" type="tel" name="driver_telephone">
    </div>

    <div class="form-row">
      <label for="driver_email">E-Mail</label>
      <input id="driver_email" placeholder="60164" type="email" name="driver_email">
    </div>


    <div class="form-row"><label for="driver_payment_type">Settlement Type</label>
      <select id="driver_payment_type" name="driver_payment_type">
      <option value="flat">Flat Rate</option>
      <option value="percent">Percent</option>
      <option value="mile">Per Mile</option>
    </select></div>


    <div class="form-row">
      <label for="driver_license_number">Lisence #</label>
      <input id="driver_license_number" placeholder="ex:D400-7836-2633" type="number" name="driver_license_number">
    </div>

    <div class="form-row">
      <label for="driver_license_expiration">Lisence Expiration Date</label>
      <input id="driver_license_expiration" type="date" name="driver_license_expiration">
    </div>

    <div class="form-row">
      <label for="driver_licence_image">Lisence Copy</label>
      <input id="driver_licence_image" type="file" name="driver_licence_image">
    </div>

    <div class="form-row">
      <label for="driver_medical_certificate_expiration">Medical Certificate Expiration</label>
      <input id="driver_medical_certificate_expiration" type="date" name="driver_medical_certificate_expiration">
    </div>

    <div class="form-row">
      <label for="driver_medical_certificate_image">Medical CXertificate Copy</label>
      <input id="driver_medical_certificate_image" type="file" name="driver_medical_certificate_image">
    </div>

    <div class="form-row">
      <label class="driverCheckbox" for="driver_access_mobile_app">Allow Mobile Access</label>
      <input id="driver_access_mobile_app" checked value="1" type="checkbox" name="driver_access_mobile_app">
    </div>
    <div class="form-row"></div>
    <div class="driver-access-copnditional">
      <div class="form-row">
        <label for="driver_username">Username</label>
        <input id="driver_username" placeholder="JohSmi" type="text" name="driver_username">
      </div>


      <div class="form-row">
        <label for="driver_password">Password</label>
        <input id="driver_password" placeholder="***" type="password" name="driver_password">
      </div>
    </div>

    <div class="clear"></div>
    <input type="submit" class="submitNewDriver button green" value="Submit" />
  </form>
</div>