Prevent Form Submission When 2 Inputs Fields Do Not Match

Question

I gift free tickets to students for free entry into a training class and I write each student's phone number on their ticket to prevent another student from using a stolen ticket for entry.

I am trying to design a form for the students to register as candidates and also to have their data.

On the form, I want them to input their phone number and the unique code that is printed on the ticket that I gifted to them.

I am trying to make only students with my ticket be able to submit the form.

How do I prevent form submission with javascript when the phone number and the ticket number do not match?

Below is a sample of a javascript that I use to prevent form submission when email does not match.

I am aware that the sample below is not the best solution but I still need the solution. Thanks.

Code Sample;

function check_email()
{
    var email = document.getElementById("email").value;
    
 if(email.localeCompare("google@gmail.com" || "google@gmail.com")) {
      
        alert("ATTENTION! \nThe email address that you provided did not match with the email that is associated.");
        return false;
    }
    return true;
}

<form action='' onsubmit="return check_email();">
<input type="password" name="email" placeholder="go*****b@*****.com" required='' id="email"/>

<button href='/' type='submit' id="submitForm">Submit</button> <button class="button" type="reset" value="Cancel">Reset</button>
</form>

What's the criteria to be the match between the phone number and your ticket code?? Does matching mean that it must be same value for those two? — Dhana D., Apr 19 '22 at 11:05
So `080` is always `A`, `123` is always `C`? Or you actually have the data of those pairs of phone number and ticket code stored?? I can't get the common pattern between the phone number and the ticket code from your example actually. The common pattern between those 2 are needed tho, unless you have whole data of all pairs stored. — Dhana D., Apr 19 '22 at 11:09
I already have the data of those pairs of phone numbers and ticket codes written on a register book. All I have to do is input them in my javascript and if the students' input matches, the form gets submitted. If their Phone number and ticket code do not match on the form when they input it, the form will show them an alert. — Link, Apr 19 '22 at 11:14

score 0 · Answer 1 · answered Apr 19 '22 at 11:02

0

You might want to use event.preventDefault() (check this question: JavaScript code to stop form submission

answered Apr 19 '22 at 11:02

JeanRemyDuboc

85
5

score 0 · Accepted Answer · answered Apr 19 '22 at 11:36

As from the comments, I acknowledged that you already have the data of pairs written well in a book. Then, you can write them all into array of pairs (array of json).

var data = [{phone: '08012345678', ticket: 'ACTF'}, {phone: '08012345679', ticket: 'ACTG'}];

// set false default

document.querySelector('form').addEventListener('submit', function (e) 
{

  var phNumber = document.getElementById("phone").value;
  var scTicket = document.getElementById("ticket").value;
  var isMatch = false; 
    // check if any same
  for(var i=0; i<data.length; i++) {
    // If same, proceed submit.
    if (data[i].phone === phNumber && scTicket === data[i].ticket){
      isMatch = true;
      return true;
    }
  }
  
    //if the validator check fails, prevent the form from being submitted
  if(isMatch == false){
    e.preventDefault();
    alert('Not match!');
  }
});

<form action='post' >
<input type="text" name="phone" placeholder="Phone Number" required='true' id="phone"/>
<input type="password" name="ticket" placeholder="Secret Ticket Code" required='true' id="ticket"/>

<button href='/' type='submit' id="submitForm">Submit</button> <button class="button" type="reset" value="Cancel">Reset</button>
</form>

Prevent Form Submission When 2 Inputs Fields Do Not Match

2 Answers2