jquery入力を検証して非表示のdivを表示

Question

フォームで連絡先のページを作成しています。入力フィールドに値があり、1つのメッセージを取得するボタンを持っています。

私は次のコードを持っています。ボタンをクリックするとページがリセットされます。

私はこの機能について助けが必要です。

function validaform() { 
 
    var i = document.getElementById("pnome").value; 
 

 
    if (i === '') { 
 
     $(".erro").css("display", "block"); 
 
     setTimeout(validaform(), 2000); 
 
    } else { 
 
     $(".valido").css("display", "block"); 
 
     setTimeout(validaform(), 2000); 
 
    } 
 
};

form { 
 
    float: left; 
 
    border-radius: 2px; 
 
    background-color: #dee0df; 
 
    padding: 10px; 
 
    margin-left: 25px; 
 
    margin-right: 50px; 
 
    margin-top: 10px; 
 
} 
 

 
input[type=submit] { 
 
    width: 20%; 
 
    background-color: slategray; 
 
    color: white; 
 
    padding: 6px 10px; 
 
    margin: 8px 0; 
 
    border: none; 
 
    border-radius: 4px; 
 
    cursor: pointer; 
 
    text-align: center; 
 
    overflow: hidden; 
 
} 
 

 
input[type=text], 
 
select { 
 
    width: 100%; 
 
    padding: 12px 20px; 
 
    margin: 8px 0; 
 
    display: inline; 
 
    border: 2px solid lightgray; 
 
    border-radius: 4px; 
 
    box-sizing: border-box; 
 
} 
 

 
.valido { 
 
    display: none; 
 
} 
 

 
.erro { 
 
    display: none; 
 
}

<script src="https://code.jquery.com/jquery-1.10.2.js"> 
 
</script> 
 
<div> 
 
    <form name="form" method="post"> 
 

 
     <label for="pnome">Primeiro Nome</label> 
 
     <input placeholder="Primeiro Nome" type="text" id="pnome" name="Primeiro Nome"> 
 

 
     <div class="opniao"> 
 
      <div class="valido">A sua opinião foi enviada. Obrigado!</div> 
 
      <div class="erro">Campos de preenchimento obrigatório.</div> 
 
     </div> 
 

 
     <div style="text-align:right"> 
 
      <input class="enviar" type="submit" value="Enviar" onclick="validaform()" /> 
 
     </div> 
 
    </form> 
 
</div>

Answer 1

私はデフォルトが通過してと検証機能は、事前に作業できるようにアクションを提出防ぐために、あなたのスニペットを調整してきました。

$("form").submit(function(event) { 
    if ($("input#pnome").val().length > 1) { 
    $(". valido").text("Validated...").show(); 
    return; 
    } 

    $(". valido").text("Campos de preenchimento obrigatório.").show().fadeOut(1000); 
    event.preventDefault(); 
}); 

function validaform() { 
 
    $(".erro, .valido").css("display", "none"); // hide error 
 
    var i = $("#pnome").val(); // get value 
 
    if (!i) { // if empty 
 
    $(".erro").css("display", "block"); 
 
    return false; 
 
    } else { 
 
    $(".valido").css("display", "block"); 
 
    return true; 
 
    } 
 
}; 
 

 
$('body').on({ 
 
    click: function(e) { 
 
    if (!validaform()) { 
 
     e.preventDefault(); // intercept the submit action so you can run the validation function 
 
    } else { 
 
     console.log('continue submitting form'); 
 
    } 
 
    } 
 
}, 'input.enviar');

form { 
 
    float: left; 
 
    border-radius: 2px; 
 
    background-color: #dee0df; 
 
    padding: 10px; 
 
    margin-left: 25px; 
 
    margin-right: 50px; 
 
    margin-top: 10px; 
 
} 
 
input[type=submit] { 
 
    width: 20%; 
 
    background-color: slategray; 
 
    color: white; 
 
    padding: 6px 10px; 
 
    margin: 8px 0; 
 
    border: none; 
 
    border-radius: 4px; 
 
    cursor: pointer; 
 
    text-align: center; 
 
    overflow: hidden; 
 
} 
 
input[type=text], 
 
select { 
 
    width: 100%; 
 
    padding: 12px 20px; 
 
    margin: 8px 0; 
 
    display: inline; 
 
    border: 2px solid lightgray; 
 
    border-radius: 4px; 
 
    box-sizing: border-box; 
 
} 
 
.valido { 
 
    display: none; 
 
} 
 
.erro { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
 
<div> 
 
    <form name="form" method="post"> 
 

 
    <label for="pnome">Primeiro Nome</label> 
 
    <input placeholder="Primeiro Nome" type="text" id="pnome" name="Primeiro Nome"> 
 

 
    <div class="opniao"> 
 
     <div class="valido">A sua opinião foi enviada. Obrigado!</div> 
 
     <div class="erro">Campos de preenchimento obrigatório.</div> 
 
    </div> 
 

 
    <div style="text-align:right"> 
 
     <input class="enviar" type="submit" value="Enviar" /> 
 
    </div> 
 
    </form> 
 
</div>

： https://api.jquery.com/submit/

のようなものでスニペットにコードを交換してみjqueryのドキュメントで説明するように

は、しかし、機能を提出jqueryのフォームを使用して、この検証の改良版があります