Question

如果我有4个字段且只需要1个字段，如何验证。我希望只有当用户尝试保存表单时所有4个字段都留空时才会出现弹出警报消息。我的HTML看起来像这样。

 <input id="txtWorkPhone" name="txtWorkPhone" data-role="maskedtextbox" required="required" data-mask="(999)-000-0000" class="k-textbox phoneInput"/>

<input id="txtHomePhone" name="txtHomePhone" data-role="maskedtextbox" data-mask="(999)-000-0000" class="k-textbox phoneInput" required="required" />
<input id="txtEmail" name="txtEmail" maxlength="260" required="required" class="k-textbox standardInput" style="width: 54%;"  />
<input id="txtCellPhone" name="txtCellPhone" data-role="maskedtextbox" required="required" data-mask="(999)-000-0000" class="k-textbox phoneInput" />

如您所见，我标记了所有字段是必需的..那么我应该如何进行这些字段的验证呢？

Answer 1

您可以像我一样进行自定义验证。请检查。

＆＃13;

$('#submit').click(function () { 
    var allFilled = true;
    $(':input:not(:button)').each(function(index, element) {    
        if (element.value === '') {
            allFilled = false;
        }
    });

    alert(allFilled);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="myForm" id="myForm">
<input id="txtWorkPhone" name="txtWorkPhone" data-role="maskedtextbox"  data-mask="(999)-000-0000" class="k-textbox phoneInput"/>

<input id="txtHomePhone" name="txtHomePhone" data-role="maskedtextbox" data-mask="(999)-000-0000" class="k-textbox phoneInput"  />
<input id="txtEmail" name="txtEmail" maxlength="260"  class="k-textbox standardInput" style="width: 54%;"  />
<input id="txtCellPhone" name="txtCellPhone" data-role="maskedtextbox"  data-mask="(999)-000-0000" class="k-textbox phoneInput" />
<input type="button" id="submit" name="submit" value="Submit">
</form>

＆＃13;

Answer 2

点击按钮即可完成此操作： -

$('button').on('click', function () {
    var isEmpty = $('input[required]').filter(function () {
        return $.trim(this.value).length > 0
    }).length == 0;

    if (isEmpty) {
        alert('Empty');
    } else {
        alert('Valid');
    }
});

现在这里： -

$('input[required]').filter(function () {
     return $.trim(this.value).length > 0
})

检查输入了一些数据的所有输入。接下来，如果.length == 0;表示所有输入都为空。如果该值大于0，则意味着至少有4个输入中的一个具有某个值。

希望它有所帮助！

Answer 3

 <form onsubmit="myFunction()">
 <input id="txtWorkPhone" name="txtWorkPhone"   data-role="maskedtextbox" required="required" data-mask="(999)-000-0000" class="k-textbox phoneInput"/>

<input id="txtHomePhone" name="txtHomePhone" data-role="maskedtextbox" data-mask="(999)-000-0000" class="k-textbox phoneInput" required="required" />
<input id="txtEmail" name="txtEmail" maxlength="260" required="required" class="k-textbox standardInput" style="width: 54%;"  />
<input id="txtCellPhone" name="txtCellPhone" data-role="maskedtextbox" required="required" data-mask="(999)-000-0000" class="k-textbox phoneInput" />
 </form>
 <script>
 function myfunction()
 {
     if($(#txtWorkPhone).value() === '' && if($(#textHomePhone).value() === '' && if($(#txtEmail).value() === '' && if($(#txtCellPhone).value() === '')
     {
        // do whatever.
     }
 }
 </script>

jQuery验证4个字段，但只需要填写一个

3 个答案: