0

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*/
}

}

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.

Link
  • 63
  • 9
  • Do not do this. You are publicly giving access to a list of all phone numbers and email addresses used on your site. This needs to be checked on the backend and returned. – kopz Oct 21 '21 at 06:13
  • @kopz As I said, I am aware of this, I have my way of securing my javascript. Do you have the solution I seek? – Link Oct 21 '21 at 06:14
  • "I have my way of securing my javascript." - Right ... Anyway this should at least point you in the right direction on how to validate a form: https://stackoverflow.com/questions/16134733/html-javascript-simple-form-validation-on-submit – kopz Oct 21 '21 at 06:22
  • @kopz I have seen this https://stackoverflow.com/questions/16134733/html-javascript-simple-form-validation-on-submit it is similar but not the solution I seek. Thanks for your help. – Link Oct 21 '21 at 06:26

3 Answers3

0

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>
polypode
  • 501
  • 3
  • 14
  • thanks but didn't work either. – Link Oct 21 '21 at 06:52
  • @AyodejiAkingbe Could you explain why, what happened ? – polypode Oct 21 '21 at 06:53
  • the form keeps submitting even when I input foo. – Link Oct 21 '21 at 06:55
  • On my code snippet it works, could you update your question with some more code that you tried or add it in the comment ? – polypode Oct 21 '21 at 06:56
  • See here: https://testetstetets.blogspot.com/p/test.html – Link Oct 21 '21 at 07:00
  • I used the code just the way you put it, no additions no subtractions. – Link Oct 21 '21 at 07:01
  • On inspecting your website, I've saw that the form node hasn't the event listener on it, I can't know why by just inspecting it but it could be that the script you added isn't running or that the selector I made isn't working for some reason. Could you add a console log in the script who add the event listener to the form to know if it is getting executed or not ? – polypode Oct 21 '21 at 07:07
0

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 === "test@test.com") {
        alert("Email is used.");
        // This prevents submission
        return false;
    }

}
llo
  • 136
  • 7
0

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

Shubham Raturi
  • 116
  • 7