jquery 验证输入并显示隐藏的 div

Question

我正在用一个表单做一个联系人页面，我想要一个按钮来“验证”输入字段是否有值并检索一条消息。

我有以下代码，当我点击按钮时重置页面。

我需要有关该功能的帮助。

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

我已经调整了您的代码段以防止默认提交操作通过并允许验证功能预先工作。

但是有一个更好的验证版本，使用 jquery 表单提交功能，详见 jquery 文档 https://api.jquery.com/submit/

尝试用类似的东西替换代码片段中的代码:

$( "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>