Javascriptフォームが機能しない

私はフォームの問題点を把握しようとしています。単に "form.hmtl"というファイルを開き、エラーが表示されます。Javascriptフォームが機能しない

<!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>

何が問題になることができますか？私を助けてください！少し早いですがお礼を！おそらくそれは目立たないものです。

出典

2017-03-15 Niksan555

エラーは何ですか？ –

情報が正しいかどうかチェックしなくてもValidateボタンを押すとファイル "form.html"が開きます。 – Niksan555

if（errors.lenght> 0）{この行の長さのスペルは悪いです。 else if（！cvvnumb.test（form.five.value））{はエラーカウントのチェック前に閉じられません。それを修正して試してみてください –

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

すべてのjsコードを変更してみてください。

出典

2017-03-15 05:26:17

Javascriptフォームが機能しない

答えて

関連する問題