stackoom
  简体   繁体   中英

Form Validation won't work using javascript/html

 原文  2017-03-15 12:50:21  6   4    javascript/ html/ html5/ forms

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?

4 answers

solution1
 1 ACCPTED  2017-03-15 12:58:09

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

solution2
 0  2017-03-15 12:56:00

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

solution3
 0  2017-03-15 13:11:56

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>

solution4
 0  2017-03-15 13:12:52

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Validation for HTML\JavaScript project won't work My Javascript code for form validation won't work email Border style won't work for form validation in javascript? Trying to redirect page after login validation using javascript and html, won't work Javascript form validation using innerHTML text won't disappear Javascript form won't work Javascript won't work with the html Javascript Form Validation won't validate Password validation won't work Javascript javascript form validation won't return true
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM