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

扬科·格奥尔吉耶夫

我有一个相当简单的验证函数,它只检查输入是否为空。我在六种不同的形式中使用它,除了一个特定的 input 之外,它似乎在任何地方都可以使用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>
鬼魂

您的验证逻辑有点混乱。这就是正在发生的事情:

  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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

jQuery每个仅在特定表单元素上

来自分类Dev

jQuery在多步骤表单上验证失败后中断

来自分类Dev

jQuery验证动态表单输入上的插件不起作用

来自分类Dev

静态表单上的 jQuery 验证

来自分类Dev

如何使用 jQuery 验证插件在 keyup 上验证非表单元素中的输入

来自分类Dev

带有输入颜色的jQuery表单验证

来自分类Dev

如果验证失败,则使用JQuery更改值输入上的文本颜色

来自分类Dev

表单上的jQuery验证无法正常工作

来自分类Dev

多步骤表单上的jquery验证

来自分类Dev

动态创建表单上的jQuery验证日期

来自分类Dev

jQuery验证仅在第3个表单中触发

来自分类Dev

jQuery在表单数据输入上

来自分类Dev

在使用jQuery输入时验证表单输入字段吗?

来自分类Dev

无法将表单输入字段上的JQuery UI工具提示限制为仅在单击/焦点事件时显示

来自分类Dev

jQuery验证具有多个表单的页面上的特定表单

来自分类Dev

jQuery表单验证失败后不显示错误

来自分类Dev

使用带有reCAPTCHA的jquery验证输入表单

来自分类Dev

具有400个输入字段的jQuery表单验证

来自分类Dev

使用包含RegEx和Jquery的输入字段来验证表单

来自分类Dev

如何使用jQuery从Ajax页面验证表单的输入

来自分类Dev

jQuery表单输入字段旁边的验证复选标记

来自分类Dev

codeigniter:表单验证jQuery

来自分类Dev

jQuery表单验证

来自分类Dev

挣扎于 jQuery 表单验证

来自分类Dev

CSS/JQuery 表单验证

来自分类Dev

jQuery 验证 AJAX 表单

来自分类Dev

使用Jquery验证输入

来自分类Dev

实时验证输入-JQuery

来自分类Dev

jQuery 验证表单检查日期是否为特定日期