javascript/htmlを使用したフォーム検証は機能しません

私は一日中コードをテストしていますが、何も起こりません。フォームは自動的にsuccess.htmlを開き、スクリプトは使用しません。javascript/htmlを使用したフォーム検証は機能しません

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

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

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

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

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

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

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

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

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

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

 
    
 
    </head> 
 
    <body class="Body" id="Main"> 
 
\t <nav> 
 
    \t \t <ul> 
 
    \t \t <li><a href="index.html">Home</a></li> 
 
    \t \t </ul> 
 
\t </nav> 
 
\t <p class="p1">Payment form validation using JavaScript<p> 
 
\t <form method="POST" action="success.html" class="myForm" name="myForm" onSubmit="javascript:return FormValidation(this)"> 
 
\t <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>

私もすべて、同様に多くのチュートリアルを確認しているが、それは解決しません。助けてください！前もって感謝します！ .cssファイルに問題がありますか？

出典

2017-03-15 Niksan555

があるでしょうHTML側で

function formValidation(theForm, event) { event.preventDefault() //your code if(allOk) { theForm.submit() } else { //do something } }

のようなものがあるでしょうフォームのフレームがサンドボックス化されており、 '許可フォーム'のアクセス許可が設定されていません。 – Monicka

コンソールの2番目のエラー：フォームのフレームがサンドボックス化されており、 'allow-forms'権限が設定されていないため、フォームの送信が ''にブロックされました。 – Monicka

、contentどこに設定されていない、それは次のようになります。だから、あなたの代わりにこれを行うことができます（：をonSubmitからジャバスクリプトを削除します）定義されていないので、エラーが発生してもフォームは送信を続けます。あなたはjavascript関数はtrueを返す場合、フォームが提出続ける

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

に

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

を変更する必要があります開始するために

。 falseを返した場合は、エラーが発生した場合、フォームの送信が停止されます。

また、あなたがこのようなform要素にonSubmit属性に機能を設定することができます闘莉王ファリア

出典

2017-03-15 12:58:09 Jouke

実際には、すでにJavascript関数が必要です。

が contentが ""に決して同じであるので、あなたのjavascriptの検証機能は、決して、falseを返すされていない

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

出典

2017-03-15 12:56:00

このソリューションは彼の問題を解決しますか？ – Monicka

で述べたように、あなたの「theFrom」で「形式」を交換してください

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

は

機能します

そのフォームはこちら

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

未定義でデバッグすると見つけることができます

あらゆる再びコンテンツがここに

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

定義されていないFormValidation

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

機能でどこそれは誤りであるべき 'theForm' でそれを置き換える代わりに

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

ここにあなたの作業コード

です

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

出典

2017-03-15 13:11:56 BlackHat

あなたの問題は、submitイベントを処理する必要があるため、関数に追加のパラメータ（イベント）が必要で、内部の最初のコード行（関数）がevent.preventDefaultあなたの関数が実行され、コードの最後に検証が行われた場合は、hereのようにjsを使用してフォームを送信してください。ので、「success.html」へブロックされたフォームの送信：私は、コンソールにこのエラーが表示submitをクリックすると、あなたは

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

出典

2017-03-15 13:12:52 Marange

javascript/htmlを使用したフォーム検証は機能しません

答えて

関連する問題