I have a JavaScript that helps me to validate user input. The javascript would redirect users to a new page if the phone number they provided has not been used by another user.

If the phone number a user provides matches with the phone numbers in my javascript, they get a message that says; Phone Number has been used! and they will not be redirected. But they get redirected if the phone number they provide does not match with any of the phone numbers in my javascript.

Below is the code;

/* myScript.js */
function check(form) /*function to check used phone numbers*/ {
    /*the following code checkes whether the entered phone number is matching*/
if (form.usercheck1.value == "12345678" 
|| form.usercheck1.value == "1112345666") 
{
alert("Phone number used!.") /*displays error message*/
} else if (form.usercheck1.value.length<11 || form.usercheck1.value.length>11) { alert("Phone number should be 11 digits! \nAnd it should begin with; 080, 081, 070, 090, or 091.");
} 
else {
window.location.replace('http://www.google.com') 
/*opens the target page while Id matches*/
}

}

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Now, I need something similar but this time not for redirection but for form submission. I need a Javascript that will prevent my form from submitting itself whenever a user provides an email that has already been used by another user.

When a user provides an email address that matches the email addresses in my javascript, they should get a message that says; Email is used. But when the email does not match with any of the email addresses in my javascript, my form should submit.

I am aware that this is not a professional way of doing this but I still need the solution.

CodePudding user response：

To do this, you can add an event listener to the form submit, get the event and execute preventDefault() on it, this will prevent form submission

const myForm = document.getElementById("myForm") ;
const myInput = document.getElementById("myInput");

myForm.addEventListener("submit", (e) => {
  if(myInput.value !== "foo") {
    e.preventDefault();
    console.log("Prevented form submitting")
  }
})

<form id="myForm" action="/submit" method="GET">
  <input type="text" id="myInput" name="myinput">
  <input type="submit" value="Submit !">
</form>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can assign a function to the onsubmit Event:

const formHandle = document.forms.form_name;

formHandle.onsubmit = processForm;

function processForm(){

    // Check email address
    if (email === "[email protected]") {
        alert("Email is used.");
        // This prevents submission
        return false;
    }

}

CodePudding user response：

It seems you want to check the user email in the database and if it exists then you want to show a message to users "The user already exists";

In this case, you have to use ajax call and check the user availability in the database

function check(form){
var email = form.email.value;
$.ajax({
// https://www.w3schools.com/jquery/ajax_ajax.asp
// request your variables and check if your back end if the email is found in database or not//
})
}

Thanks