Can I Validate Two Fields Instead of One Field With This JavaScript?-CodePudding

I use the javascript below to validate the Phone Number field on my form by showing the next hidden field whenever the value the user inputs in the phone number field on my form matches with the values in my javascript.

however, if their input does not match with the values in my javascript, the hidden field remains hidden and the user will be unable to submit the form.

The javascript works fine for the phone field but I am trying to validate two different fields to match with the values in my javascript.

For example, I want to make the values users input on the phone field and the email field of my form match with the values in my javascript before the hidden field shows.

Illustration below;

Lets say, the values in my javascript are; if (phone === "12345" && email === "[email protected]")

If the user inputs Phone: 12345 and their email: [email protected], the hidden field shows.

If the user inputs Phone:123 and their email: [email protected], the hidden field remains hidden.

I have tried different solutions to validate the phone and email field but all my solutions failed and I need some help with this.

Sorry if my solution below is poor but I am not the owner of the original code.

Thanks for your help.

Below is my sample code for the phone field validation. (WORKING FINE!)

$('.validate').hide();
$('body').on('blur', '#phone', function() {
  var value = $(this).val();
  if (isPhoneInUse(value)) {
    $(".validate").show();
  } else {
  alert ("Phone do not match!\nYou cannot submit this form!");
    $(".validate").hide();
  }
});
$('#submitForm').on('submit', function(e) {
  var value = $("#phone").val();
  if (isPhoneInUse(value)) {
    // validation failed. cancel the event
    console.log("not submitting");
    return false;
  }
})

function isPhoneInUse(phone) {
  return (phone === "1234" || phone === "23456")
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<form action='' method='POST' id="submitForm">
<div ><span style="color: red;"><b>Phone Matches!</b></span></div>

  <input type="phone" name='phone' required='' id="phone" placeholder="0000-000-0000" />

  <br/><br/>
<div >
  <button href='/' type='submit' id="submitForm">Submit</button>
</div>
</form>

Below is my solution to validate the phone and email fields. (NOT WORKING!)

$('.validate').hide();
$('body').on('blur', '#phone', '#email', function() {
var value = $(this).val();
  if (isDataInUse( $("#phone").val(), $("#email").val() )) {
    $(".validate").show();
  } else {
  alert ("Phone and Email do not match!\nYou cannot submit this form!");
    $(".validate").hide();
  }
});
$('#submitForm').on('submit', function(e) {
  var value = $("#phone" && "#email".val());
  if (isDataInUse( $("#phone").val(), $("#email").val() )) {
    // validation failed. cancel the event
    console.log("not submitting");
    event.preventDefault();
  }
})

function isDataInUse(phone, email) { 
return (phone === "1234" && email === "[email protected]") 
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<form action='' method='POST' id="submitForm">
<div ><span style="color: red;"><b>Phone and Email Matches!</b></span></div>

  <input type="phone" name='phone' required='' id="phone" placeholder="0000-000-0000" />
  <br/><br/>
    <input type="email" name='email' required='' id="email" placeholder="[email protected]" />

  <br/><br/>
<div >
  <button href='/' type='submit' id="submitForm">Submit</button>
</div>
</form>

CodePudding user response：

After many corrections, here is a working snippet:

$('.validate').hide();

$('#phone, #email').on('change', function() {
  let phone = $('#phone').val();
  let email = $('#email').val();
  if (isDataInUse(phone, email)) {
    $(".validate").show();
  } else {
  alert ("Phone or Email do not match!\nYou cannot submit this form!");
    $(".validate").hide();
  }
});

$('#theForm').on('submit', function(e) {
  let phone = $('#phone').val();
  let email = $('#email').val();
  if (isDataInUse(phone, email)) {
    // validation failed. cancel the event
    console.log("not submitting");
    e.preventDefault();
    return false;
  }
})

function isDataInUse(phone, email) {
  return (phone === "1234" && email === "[email protected]")
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<form action='' method='POST' id="theForm">
<div ><span style="color: red;"><b>Phone and Email Matches!</b></span></div>

  <input type="phone" name='phone' required='' id="phone" placeholder="0000-000-0000" />
  <br/><br/>
    <input type="email" name='email' required='' id="email" placeholder="[email protected]" />

  <br/><br/>
<div >
  <button href='/' type='submit' id="submitForm">Submit</button>
</div>
</form>