Form Validation won't work using javascript/html

Question

I've been testing my code all day, but nothing happens. The form automatically opens the success.html and doesn't use the script.

 function FormValidation(theForm) {
     var errors = "";
     var alph = /^[\w ]+$/;
     var cardnumb = /^\d{16}$/;
     var cvvnumb = /^\d{3}$/;
     var monthnumb = /^\d{1,2}$/;
     var yearnumb = /^\d{4}$/;

     if (form.one.value == "") {
         errors += "Please enter your full name! \n";
  }

     else if (!alph.test(form.one.value)) {
         errors += "Full name is wrong or includes invalid characters! \n";
     }
     if (form.two.value == "") {
         errors += "Please enter your 16-digit code! \n";
     }

     if (!cardnumb.test(form.two.value)) {
         errors += "Card number does not consist of 16 digits or includes invalid characters! \n";
     }

     if (form.three.value == "") {
         errors += "Please enter your month of expiration! \n";
     }

     if (!monthnumb.test(form.three.value)) {
         errors += "The month does not consist of 2 digits or includes invalid characters! \n";
     }
      
     if (form.four.value == "") {
         errors += "Please enter your year of expiration! \n";
     }

     if (!yearnumb.test(form.four.value)) {
         errors += "The year does not consist of 4 digits or includes invalid characters! \n";
     }

     if (form.five.value == "") {
         errors += "Please enter your 3-digit CVV code! \n";
     }

     if (!cvvnumb.test(form.five.value)) {
         errors += "The CVV does not consist of 3 digits or includes invalid characters! \n";
     }
      
     if (!content == "") {
      alert(content);
      return false;
  }
 }

 <!DOCTYPE html>
    <html lang="en-US" class="Html" id="Main" dir="auto">
    <head class="Head" id="Main">
 <link rel="stylesheet" type="text/css" href="style.css">
 <meta name="description" content="NRN">
 <meta name="author" content="NRN">
 <title class="Title" id="Title">NRN</title>

   
    </head>
    <body class="Body" id="Main">
 <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
    </ul>
 </nav>
 <p class="p1">Payment form validation using JavaScript<p>
 <form method="POST" action="success.html" class="myForm" name="myForm" onSubmit="javascript:return FormValidation(this)">
 <div class="form-group-name">
        <label for="name">Owner</label><br>
        <input type="text" placeholder="Name on card" class="form-control-1" id="one" name="one">
    </div>
    <div class="form-group-number">
        <label for="number">Card number</label><br>
        <input type="text" placeholder="16-digit code" class="form-control-2" id="two" name="two">
    </div>
    <div class="form-group-date">
        <label for="date">Expiration date</label><br>
        <input type="text" placeholder="Month" class="form-control-3" id="three" name="three">
        <input type="text" placeholder="Year" class="form-control-3" id="four" name="four">
    </div>
    <div class="form-group-cvv">
        <label for="cvv">CVV</label><br>
        <input type="text" placeholder="3-digit code" class="form-control-4" id="five" name="five">
    </div>
    <div class="form-group-submit">
        <input type="submit" class="submit_form" value="Validate">
    </div>
    </form>
    </body>
    </html>

I have checked everything, as well as many tutorials too, but it doesn't help. Please help! Thanks in advance! Could the problem be in the .css file?

When i hit submit i see in console this error: Blocked form submission to 'success.html' because the form's frame is sandboxed and the 'allow-forms' permission is not set. — Monicka, Mar 15 '17 at 13:00
Second error in console:Blocked form submission to '' because the form's frame is sandboxed and the 'allow-forms' permission is not set. — Monicka, Mar 15 '17 at 13:03

Jouke · Accepted Answer · 2017-03-15T13:12:31.730

Your javascript validation function is never returning false, because content is never equal to "", content is nowhere set so it will be undefined, so the form keeps submitting even if an error occurred.

For a start you should change

if (!content == "") {
    alert(content);
    return false;
}

To

if (!errors == "") {
    alert(errors);
    return false;
} else {
    return true;
}

If your javascript function returns true, the form will continue submitting. If it returns false, in case of an error, it will stop submitting the form.

In addition you can set a function in the onSubmit attribute on the form element like this:

<form onSubmit="return FormValidation(this)""></form>

as mentioned by Tulio Faria

score 0 · Answer 2 · answered Mar 15 '17 at 12:56

0

in fact onSubmit already expect a Javascript function. So, you can do this instead (remove the javascript: from onSubmit):

<form method="POST" action="success.html" class="myForm" name="myForm" onSubmit="return FormValidation(this)">

answered Mar 15 '17 at 12:56

Tulio Faria

874
7
16

score 0 · Answer 3 · answered Mar 15 '17 at 13:11

Replace 'form' with 'theFrom' in you function

you can debug and find that form is undefined here

if (form.one.value == "") {
    errors += "Please enter your full name! \n";
}

replace it with 'theForm' every where in function FormValidation

if (theForm.one.value == "") {
    errors += "Please enter your full name! \n";
}

again content is not defined here

 if (!content == "") {
     alert(content);
     return false;
 }

it should be error instead

if (!errors == "") {
    alert(errors);
    return false;
} else {
    return true;
}

Here's your working code

<!DOCTYPE html>
<html lang="en-US" class="Html" id="Main" dir="auto">
<head class="Head" id="Main">
<meta name="description" content="NRN">
<meta name="author" content="NRN">
<title class="Title" id="Title">NRN</title>

<script type="text/javascript">

function FormValidation(theForm) {
    var errors = "";
    var alph = /^[\w ]+$/;
    var cardnumb = /^\d{16}$/;
    var cvvnumb = /^\d{3}$/;
    var monthnumb = /^\d{1,2}$/;
    var yearnumb = /^\d{4}$/;

    if (theForm.one.value == "") {
        errors += "Please enter your full name! \n";
    }

    else if (!alph.test(theForm.one.value)) {
        errors += "Full name is wrong or includes invalid characters! \n";
    }
    if (theForm.two.value == "") {
        errors += "Please enter your 16-digit code! \n";
    }

    if (!cardnumb.test(theForm.two.value)) {
        errors += "Card number does not consist of 16 digits or includes invalid characters! \n";
    }

    if (theForm.three.value == "") {
        errors += "Please enter your month of expiration! \n";
    }

    if (!monthnumb.test(theForm.three.value)) {
        errors += "The month does not consist of 2 digits or includes invalid characters! \n";
    }

    if (theForm.four.value == "") {
        errors += "Please enter your year of expiration! \n";
    }

    if (!yearnumb.test(theForm.four.value)) {
        errors += "The year does not consist of 4 digits or includes invalid characters! \n";
    }

    if (theForm.five.value == "") {
        errors += "Please enter your 3-digit CVV code! \n";
    }

    if (!cvvnumb.test(theForm.five.value)) {
        errors += "The CVV does not consist of 3 digits or includes invalid characters! \n";
    }

    if (!errors == "") {
        alert(errors);
        return false;
    } else {
        return true;
    }
}

</script>
</head>
<body class="Body" id="Main">
<nav>
    <ul>
        <li><a href="index.html">Home</a></li>
    </ul>
</nav>
<p class="p1">Payment form validation using JavaScript<p>
<form method="POST" action="success.html" class="myForm" name="myForm" onSubmit="javascript:return FormValidation(this)">
<div class="form-group-name">
    <label for="name">Owner</label><br>
    <input type="text" placeholder="Name on card" class="form-control-1" id="one" name="one">
</div>
<div class="form-group-number">
    <label for="number">Card number</label><br>
    <input type="text" placeholder="16-digit code" class="form-control-2" id="two" name="two">
</div>
<div class="form-group-date">
    <label for="date">Expiration date</label><br>
    <input type="text" placeholder="Month" class="form-control-3" id="three" name="three">
    <input type="text" placeholder="Year" class="form-control-3" id="four" name="four">
</div>
<div class="form-group-cvv">
    <label for="cvv">CVV</label><br>
    <input type="text" placeholder="3-digit code" class="form-control-4" id="five" name="five">
</div>
<div class="form-group-submit">
    <input type="submit" class="submit_form" value="Validate">
</div>
</form>
</body>
</html>

score 0 · Answer 4 · edited May 23 '17 at 12:32

Your problem is that you need to handle the submit event, so your function needs an additional parameter (event) and the first code line inside of it (the function) must be event.preventDefault() so when you submit the form before submit it your function will be executed, and then at the end of your code if the validation went ok submit your form using js as explained here. You'll have something like

function formValidation(theForm, event)
{
    event.preventDefault()
    //your code

    if(allOk)
   {           theForm.submit()
}
    else
{
   //do something
}


}

On the HTML side you'll have

<form method="POST" action="success.html" class="myForm" name="myForm" onSubmit="return FormValidation(this, event)">

Form Validation won't work using javascript/html

4 Answers4