stackoom
  简体   繁体   中英

Javascript form won't work

 原文  2017-03-15 04:52:06  3   1    javascript/ html/ arrays/ forms

Question

I am trying to figure out what is the problem with the form. It just opens the file "form.hmtl" and gives me an error. 

<!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">
<script type="text/javascript">

  function checkForm(form)
  {
    var x = document.getElementById("name");
    x.value = x.value.toUpperCase();

    var y = document.getElementById("number");
    y.value = y.value.split(-,4);

    var z = document.getElementById("three");

    var i = document.getElementById("four");

    var alph = /^[\w ]+$/;
    var cardnumb = /^\d{4}-\d{4}-\d{4}-\d{4}$/;
    var cvvnumb = /^\d{3}$/;
    var monthnumb = /^\d{1,2}$/;
    var yearnumb = /^\d{4}$/;
    var errors=[]; 

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

    else if(!alph.test(form.one.value)) {
      errors.push("Full name is wrong or includes invalid characters!");

    if(form.two.value == "") {
      errors.push("Please enter your 16-digit code!");
    }

    else if(!cardnumb.test(form.two.value)) {
      errors.push("Card number does not consist of 16 digits or includes invalid characters!");

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

    else if(!monthnumb.test(form.three.value)) {
      errors.push("The month does not consist of 2 digits or includes invalid characters!");

    if Number(z.value) > 12 {
       errors.push("The month must be between (0)1 or 12!");
    } 

    if(form.four.value == "") {
      errors.push("Please enter your year of expiration!");
    }

    else if(!yearnumb.test(form.four.value)) {
      errors.push("The year does not consist of 4 digits or includes invalid characters!");

    if Number(i.value) < 2017 {
       errors.push("The year must be greather than 2017!");
    } 

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

    else if(!cvvnumb.test(form.five.value)) {
      errors.push("The CVV does not consist of 3 digits or includes invalid characters!");

    if (errors.lenght > 0) {
        var msg = "Errors: \n\n";
        for (var i=0; i<errors.lenght; i++) {
            msg += errors[i] + "\n";
        }
        alert(msg);
        return false;
    }
    return true;
  }

</script>

<nav>
    <ul>
        <li><a href="index.php">Home</a></li>
    </ul>
</nav>
<p class="p1">Payment form validation using JavaScript<p>
<form method="post" action="form.html" onsubmit="return checkForm(this);">
<div class="form-group-name">
    <label for="name">Owner</label><br>
    <input type="text" placeholder="Name on card" class="form-control-1" id="name" 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="number" 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="date" name="three">
    <input type="text" placeholder="Year" class="form-control-3" id="date2" 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="cvv" name="five">
</div>
<div class="form-group-submit">
    <input type='submit' class='submit_form' value='Validate'>
</div>
</form>

What can be the problem? Please help me! Thank in advance! Perhaps it is something that is not noticeable.

1 answers

solution1
 0 ACCPTED  2017-03-15 05:26:17

<script type="text/javascript">


function checkForm(form) {
    var x = document.getElementById("name");
    x.value = x.value.toUpperCase();

    var y = document.getElementById("number");
    y.value = y.value.split(-, 4);

    var z = document.getElementById("three");

    var i = document.getElementById("four");

    var alph = /^[\w ]+$/;
    var cardnumb = /^\d{4}-\d{4}-\d{4}-\d{4}$/;
    var cvvnumb = /^\d{3}$/;
    var monthnumb = /^\d{1,2}$/;
    var yearnumb = /^\d{4}$/;
    var errors = [];

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

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

    else if (!cardnumb.test(form.two.value)) {
        errors.push("Card number does not consist of 16 digits or includes invalid characters!");
    }
    if (form.three.value == "") {
        errors.push("Please enter your month of expiration!");
    }

    else if (!monthnumb.test(form.three.value)) {
        errors.push("The month does not consist of 2 digits or includes invalid characters!");
    }
    if (Number(z.value) > 12) {
        errors.push("The month must be between (0)1 or 12!");
    }

    if (form.four.value == "") {
        errors.push("Please enter your year of expiration!");
    }

    else if (!yearnumb.test(form.four.value)) {
        errors.push("The year does not consist of 4 digits or includes invalid characters!");
    }
    if (Number(i.value) < 2017) {
        errors.push("The year must be greather than 2017!");
    }

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

    else if (!cvvnumb.test(form.five.value)) {
        errors.push("The CVV does not consist of 3 digits or includes invalid characters!");
    }
    if (errors.lenght > 0) {
        var msg = "Errors: \n\n";
        for (var i = 0; i < errors.lenght; i++) {
            msg += errors[i] + "\n";
        }
        alert(msg);
        return false;
    }
    return true;
}

</script>

Change your all js code and try.

暂无
暂无

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 php form javascript onSubmit won't work Javascript: getElementByID won't work on Aweber form resetting form with javascript won't work Javascript won't work properly with my form Why won't this javascript phone field form validator work? Javascript posting to form - won't work if field is hidden Form Validation won't work using javascript/html My Javascript code for form validation won't work email Border style won't work for form validation in javascript? Javascript in WordPress won't work because of AJAX form
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM