CODEWITHSUNDEEP
javascripthtmlforms
Niksan555
Niksan555

Reputation: 11

Form Validation won't work using javascript/html

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?

Upvotes: 0

Views: 1478

Answers (4)

KarlsMaranjs
KarlsMaranjs

Reputation: 535

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)">

Upvotes: 0

Jouke
Jouke

Reputation: 362

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

Upvotes: 1

BlackHat
BlackHat

Reputation: 189

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>

Upvotes: 0

Tulio Faria
Tulio Faria

Reputation: 904

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)">

Upvotes: 0

Related Questions