如何使用Vanilla JavaScript验证任一表单字段

Question

I'm attempting to send an error message when either the email field or the phone field of a form doesn't match the regex. The validation message shouldn't submit if either fields are filled in.

What happens right now when I go to submit the form with one of the fields filled in with the proper information the form gives me the error message and will not post the form. Once I enter the correct input into the other field it processes the form.

What I want it to do is to process the form if either the email field is filled out or the phone field is filled out with information that matches the regular expressions.

If neither of the forms are filled out correctly I want the form to throw the error message.

Here's the if statement I am working with so far.

<form id="contact_form"  action="" method="POST">
    <input type=hidden name="" value="">
    <input type=hidden name="" value="">

    <p class="errmsg" id="name_errormsg"></p>

    <input  id="name" maxlength="80" name="form_name" placeholder="Name" size="20" type="text" />
    <input  id="email" maxlength="80" name="email" placeholder="Email" size="20" type="text" />
    <input  id="phone" maxlength="40" name="phone" placeholder="Phone number" size="20" type="text" />

    <textarea id="description" name="description" placeholder="How can we help you?"></textarea>

    <input type="submit" name="submit" value="Send message">
</form>

$(document).ready(function() {

  $overlay = $(".modal-overlay");
  $modal = $(".modal-frame");


  $modal.bind('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e){
  if($modal.hasClass('state-leave')) {
    $modal.removeClass('state-leave');
  }
});
$('.form-close-button').on('click', function(){
     $overlay.removeClass('state-show');
     $modal.removeClass('state-appear').addClass('state-leave');
   });

   $('#contactformbtn').on('click', function(){
     $overlay.addClass('state-show');
     $modal.removeClass('state-leave').addClass('state-appear');
   });



var formHandle = document.forms[0];

formHandle.onsubmit = processForm;


function processForm(){


  var emailInput = document.getElementById('email');

  var emailValue = emailInput.value;


  var phoneInput = document.getElementById('phone');

  var phoneValue = phoneInput.value;




  var regexPhone = /^(1?(-?\d{3})-?)?(\d{3})(-?\d{4})$/;
  var regexEmail = /^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;

if((!regexPhone.test(phoneValue)) ||(!regexEmail.test(emailValue))) {
    nameErr = document.getElementById("name_errormsg");
    nameErr.innerHTML = "Please enter your phone number or a valid email address.";
    nameErr.style.color = "red";
    return false;
}

}
});

If any of you could point out where I went wrong this that would be great!

Thank you for taking the time to read this.

Have a good day.

Answer 1

Based on your last comment (which should be in the question) your logic is wrong.

You're currently checking for failure of either field. If phone fails or email fails. If one field isn't filled in it'll fail because you don't allow blank.

You want to test for failure of both fields (with a caveat):

if (!regexPhone.test(phoneValue) && !regexEmail.test(emailValue)) {
    ....

Or you can change your regex.

The caveat is that say a user enters in a valid phone, but an invalid email: what should happen in that case? Should validation pass or fail?