Question

我有5个文本字段，它们是结算地址，城市，州，邮政编码，国家/地区我希望以这样的方式验证这些字段：如果用户填写任何一个文本字段，他必须填写所有字段，例如用户输入城市字段他必须输入所有字段，即帐单地址，州，邮政编码或如果他输入地址，他必须输入所有字段，即城市，州，邮政编码等，否则他不得输入任何字段

由于我已经编写了这段代码，但是由于我没有得到确切的结果，它只会在我开始串行输入时工作，即第一个地址然后是城市，然后说明等等，并且消息显示多次我点击提交按钮它不会显示任何一个，请查看此代码并进行必要的更改。请提前感谢此帮助。

$('#SAVE_HEADER').click(function() {
  var valid = true;
  var requiredFields = ['billing_address_street', 'billing_address_city', 'billing_address_state', 'billing_address_postalcode', 'billing_address_country'];
  for (var i = 0; i < requiredFields.length; i++) {
    var val = $('#' + requiredFields[i]);
    if (val.val() == '') {
      var b = i;
      var a = requiredFields.length - b;

      if (b != 0 && a != 5)
        $("<span>Enter all the Address Fileds!</span>").appendTo('#billing_address_fieldset');

    }
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<fieldset id="billing_address_fieldset">
  <legend>Billing Address1</legend>
  <table border="0" cellspacing="1" cellpadding="0" class="edit" width="100%">
    <tbody>
      <tr>
        <td id="billing_address_street_label" width="%" scope="row">
          <label for="billing_address_street">Billing Address1:</label>
        </td>
        <td>
          <textarea id="billing_address_street" name="billing_address_street" maxlength="150" rows="2" cols="30" tabindex="0"></textarea>
        </td>
      </tr>
      <tr>
        <td id="billing_address_city_label" width="%" scope="row">
          <label for="billing_address_city">Billing City:</label>
        </td>
        <td>
          <input type="text" name="billing_address_city" id="billing_address_city" size="30" maxlength="100" value="" tabindex="0">
        </td>
      </tr>
      <tr>
        <td id="billing_address_state_label" width="%" scope="row">
          <label for="billing_address_state">Billing State:</label>
        </td>
        <td>
          <input type="text" name="billing_address_state" id="billing_address_state" size="30" maxlength="100" value="" tabindex="0">
        </td>
      </tr>
      <tr>
        <td id="billing_address_postalcode_label" width="%" scope="row">
          <label for="billing_address_postalcode">Billing Postal Code:</label>
        </td>
        <td>
          <input type="text" name="billing_address_postalcode" id="billing_address_postalcode" size="30" maxlength="20" value="" tabindex="0">
        </td>
      </tr>
      <tr>
        <td id="billing_address_country_label" width="%" scope="row">
          <label for="billing_address_country">Billing Country:</label>
        </td>
        <td>
          <input type="text" name="billing_address_country" id="billing_address_country" size="30" maxlength="150" value="" tabindex="0">
        </td>
        <tr>
          <td colspan="2" nowrap="">
            <input type="submit" id="SAVE_HEADER">
          </td>
        </tr>
    </tbody>
  </table>
</fieldset>

Answer 1

我重新编写你的脚本，格式化并以你自己的风格！你的剧本有点乱： - ）

$('#SAVE_HEADER').click(function() {
    var dataInForm = false;
    var allFieldsFilled = true;

    var requiredFields = ['billing_address_street', 'billing_address_city', 'billing_address_state', 'billing_address_postalcode', 'billing_address_country'];

    // Know if there are data in form
    for (var i = 0; i < requiredFields.length; i++) {
        var val = $('#' + requiredFields[i]);
        if (val.val() != '' && !dataInForm) {
            // there are data in form so put true
            dataInForm = true;
        }
    }

    // If there is data in form, loop tu search empty fields
    if (dataInForm) {
        for (var ii = 0; ii < requiredFields.length; ii++) {
            var val2 = $('#' + requiredFields[ii]);
            if (val2.val() !== '' && allFieldsFilled) {
                allFieldsFilled = false;
            }
        }
    }

    // put message if there is at least 1 data in form && fields are missing
    if (dataInForm && !allFieldsFilled) {
        $('#errorplaceholder').html("<span>Enter all the Address Fileds!</span>");
    }
});

您只需添加带有errorplaceholder id的div：

<div id="errorplaceholder"></div>

你也可以在这里拉扯它：

http://jsfiddle.net/1jzybq9n/7/

修改

您无法访问所呈现的HTML，因此只需在jquery中添加div，然后在onclick中使用它。为此，只需添加以下代码：

$( document ).ready(function() { // Add div placeholder for error managment $("<div id=\"errorplaceholder\"></div>").appendTo('fieldset'); });

您可以在此处进行测试：http://jsfiddle.net/1jzybq9n/9/

修改

这是你的最终版本

$( document ).ready(function() { // Add div placeholder for error managment $("<div id=\"errorplaceholder\"></div>").appendTo('fieldset'); }); $('#SAVE_HEADER').click(function() { var dataInForm = false; var allFieldsFilled = true; var requiredFields = ['billing_address_street', 'billing_address_city', 'billing_address_state', 'billing_address_postalcode', 'billing_address_country']; // Know if there are data in form for (var i = 0; i < requiredFields.length; i++) { var val = $('#' + requiredFields[i]); if (val.val() != '' && !dataInForm) { // there are data in form so put true dataInForm = true; } } // If there is data in form, loop tu search empty fields if (dataInForm) { for (var ii = 0; ii < requiredFields.length; ii++) { var val2 = $('#' + requiredFields[ii]); if ( (val2.val().length == 0) && allFieldsFilled) { allFieldsFilled = false; } } } // put message if there is at least 1 data in form && fields are missing if (dataInForm && !allFieldsFilled) { $('#errorplaceholder').html("<span>Enter all the Address Fileds!</span>"); } else { if(dataInForm && allFieldsFilled) { $('#errorplaceholder').html(""); } } });

小提琴：http://jsfiddle.net/1jzybq9n/10/

Answer 2

你的代码很好。尝试在body标记结束前移动js代码。它有效。

验证以填充所有文本字段或无

2 个答案: