检查是否至少有一个文本字段填充了jQuery

时间:2015-12-22 09:15:36

标签: javascript jquery validation

我有一个HTML表单,在提交时会发送一封邮件。我已完成邮件发送和其他所有内容,但是,我有一个特定的验证策略。需要填写电话号码或电子邮件字段。两者都不是必填字段,但是使用jQuery,我想至少强制它们。没有电话或电子邮件,表格不得提交。我是jQuery的新手。我的表格如下:

 <form name="myform" id="myform" role="form" method="post" action="mail.php">
    <div class="form-group">
        <label for="Phone">Phone*:</label>
        <input type="type" class="form-control" id="Phone" placeholder="Enter Phone">
        <label for="fn">First Name*:</label>
        <input type="type" class="form-control" id="fn" placeholder="Enter First Name" required>
    </div>
    <div class="form-group">
        <label for="fn">Surname:</label>
        <input type="type" class="form-control" id="fn" placeholder="Enter Surname">
        <label for="email">Email:</label>
        <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
    <div class="form-group">
        <button type="submit" class="btn submit pull-right">Submit</button>
    </div>
</form>

5 个答案:

答案 0 :(得分:2)

这样的事情应该这样做:

//When the form is submitted...
//Might want to give it an ID so you can bind to that instead (i.e. #myform)
$("form").submit(function() {
    //If both of them are empty...
    if($("#email").val().length === 0 && $("#Phone").val().length === 0) {
        //Notify the user.
        alert("You need to enter an email or a phone number.");
        //And do not submit the form.
        event.preventDefault();
    }
    //Here you can do other stuff related to submitting the form.
});

答案 1 :(得分:1)

首先,您需要设置一个变量,用于存储结果:

var atLeastOneFilled = false;

然后,您需要浏览您感兴趣的所有字段(在此示例中为#email,#Pihone):

$('#email, #Phone').each(function(index, field) { ... });

然后,我们需要检查是否填写了任何字段,所以在每个()函数(我放置'...')中我们可以编写,例如:

if($(field).val !== '')
    atLeastOneFilled = true;

这样,如果至少有一个字段的值不同于“”(无),则我们的标志atLeastOneFilled将更改为true。

然后,你可以用变量做任何你想做的事情:

if(atLeastOneFilled) {
    doSomething();
}

答案 2 :(得分:0)

以下条件将检查任何值应为true

if($('#email').val() || $('#Phone').val()){
   //do your actions here.
}

答案 3 :(得分:0)

您可以使用filter

$(function () {
  $("form").submit(function () {
    if ($("input").filter(function () {
      return $(this).val().trim().length > 0;
    }).length == 0)
      return false;
  });
});

答案 4 :(得分:-1)

HANDLE