我可以使用这个 JavaScript 验证两个字段而不是一个字段吗？

Question

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 === "12345@gmail.com")

If the user inputs Phone: 12345 and their email: 12345@gmail.com, the hidden field shows .

If the user inputs Phone:123 and their email: 12345@gmail.com, 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 class="validate"><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 class="validate"> <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 === "1234@gmail.com") }

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

<form action='' method='POST' id="submitForm">
<div class="validate"><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="hello@youremail.com" />

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

Answer 1

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 === "1234@gmail.com") }

 <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <form action='' method='POST' id="theForm"> <div class="validate"><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="hello@youremail.com" /> <br/><br/> <div class="validate"> <button href='/' type='submit' id="submitForm">Submit</button> </div> </form>