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

Question

I have a HTML form, which when submitted would send out a mail. I have completed the mail sending and everything else, however, I have a specific validation strategy. Either the phone number or the email fields needs to be filled. Both are not mandatory fields, but using jQuery, I would like to make at least on of them mandatory. The form shall not submit without either phone or email. I am new to jQuery. My form is as follows:

 <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>

Answer 1

Something like this should do it:

//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.
});

Answer 2

First, you need to set a variable in which you'll store your result:

var atLeastOneFilled = false;

Then, you need to go through all the fields you're interested in (in this example - #email, #Phone):

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

Then, we need to check if any of the fields is filled in, so in each() function (where I've placed '...') we can write, for example:

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

This way, if at least one field would have a value different from "" (nothing), our flag atLeastOneFilled would be changed to true.

Then, you can do whatever you want with your variable:

if(atLeastOneFilled) {
    doSomething();
}

Answer 3

Below condition will check anyone of the value should be true

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

Answer 4

You can use a filter :

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

Answer 5

<script>
$( "#form" ).validate({
  rules: {
    phone: {
      require_from_group: [1, ".form-group"]
    },
    email: {
      require_from_group: [1, ".form-group"]
    }
  }
});
</script>