2016-05-23 14 views
0

私は3つのセクションを持ち、各セクションには必要なバリデーションが入力されています。ボタンをクリックすると、有効な検証が行われません。第1セクションは第2セクションに、検証は不要です。これで私を助けてください。バリデーションがHTMLで動作しない

<!doctype html> 
<html> 
<head> 

    <style> 
.m-div {display: none;} 

.m-div.current { 
    display: block; 
} 
</style> 
</head> 
<body> 

<form action="" method="post"> 

    <section class="m-div current" id="one" > 
    <input type="checkbox" name="bklet" required/> 
    <label for="bklet"> check it</label> 
</section> 


<section class="m-div" id="two"> 
    <label> First Name</label> 
    <input type="text" name="Fname" pattern=".{3,}" title="3 characters minimum" class="input width-full" required> 

    <label> Last Name</label> 
    <input type="text" name="Lname" pattern=".{3,}" title="3 characters minimum" class="input width-full" required>    
</section> 



<section class="m-div" id="three"> 
<label> Your Message</label> 
<textarea class="textarea width-full" name="message" required></textarea> 
</section> 

<input type="submit" onclick="next();"> 

</form> 


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script> 
function next() { 
    var current = $('.current'); 
    var next = current.next('.m-div:first'); 

    // loop back to the first div 
    // if(next.length == 0) { next = $('#one'); } 

    current.removeClass('current'); 
    next.addClass('current'); 
} 
</script> 

</body> 
</html> 
+0

ここに*正確には?* –

+0

私のここで確認してください:http://stackoverflow.com/questions/37321862/change-the-contact-forms-html-after-validation-and-mail-sent/37322045#37322045 –

+0

申し訳ありません。MR.Fred、私の質問を変更しました –

答えて

0

フォームフィールドに適用した検証属性は、Webブラウザのヒントに過ぎません。各ブラウザは、他のブラウザとは異なる検証を表示または処理することがあります。詳細については

、私のような、HTMLフォーム検証のトピックに関するチュートリアルを見直し提案:それは、フォームデータはまだかかわらず、これらの検証の提出することができることに注意することも重要ですhttp://www.the-art-of-web.com/html/html5-form-validation/

あなたが使用しているバリデーションは、送信されたデータが存在するか、または有効であることを保証するために何もしません。彼らは、無効なデータを提出したい人が簡単にバイパスすることができます。したがってあなたは__must__送信されたフィールドのサーバー側も検証します!

関連する問題