Question

我正在用表单做一个联系人页面，我想要一个按钮“＃34;验证＆＃34;输入字段具有值并检索一条消息。

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

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

＆＃13;

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);
    }
};

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

然而，使用jquery表单提交函数有更好的验证版本，详见jquery doc 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>

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

1 个答案: