Question

所以我想使用jquery为学校作业执行验证功能，确保在单击提交按钮时没有字段留空。我做了下面的代码，但它似乎没有起作用。有任何想法吗？感谢

$(document).click(function () {
    var name = $("#firstname").val();
    var surname = $("#lastname").val();
    var email = $("#email").val();
    var comment = $("#comment").val();

    if(name=="" || surname=="" || email=="" || comment==""){
        alert("A field is missing");
    } else {
        return true;
    }
});

编辑1：我改变了第一行，所以我做了。提交：

$('#valForm').submit(function(){

编辑2： JS代码：

$(document).ready(function () {
$('#valForm').submit(function () {
    var name = $("#firstname").val();
    var surname = $("#lastname").val();
    var email = $("#email").val();
    var comment = $("#comment").val();

    if (!name || !surname || !email || !comment) {
        alert("A field is missing");
        e.preventDefault();
        return false;
    } else {
        return true;
    }
})

}）;

Html代码:(不要介意缩进）

    <div id="question-box">
        <form onsubmit="checkEmail()" id="valForm">
            <h2>Contact the club</h2>
            <label for="">First Name:</label>
            <input type="text" name="firstname" id="firstname" placeholder="First Name"/>
            <br>
            <br>
            <br>
            <label for="">Last Name:</label>
            <input type="text" name="lastname" id="lastname" placeholder="Last Name"/>
            <br>
            <br>
            <br>
            <label for="">Email:</label>
            <input type="text" name="email" id="email" placeholder="email"/>
            <br>
            <br>
            <br>
            <label for="">Comments:
                <br>
                <br>
                <br>
                <br>
            </label>
            <input type="text" name="comments" id="comment">
            <br>
            <br>
            <br>
            <input type="submit" value="submit" id="submit">
        </form>
    </div>

好的，它有效。像往常一样愚蠢的错误......我没有调用脚本插件。感谢您的耐心等待＆lt; 3

Answer 1

确保您返回false并对通过的事件对象调用 e.preventDefault（） ...您需要在.submit中添加e（函数（ e ））这样做

＆＃13;
＆＃13;
$(document).ready(function() { $('#userCommentForm').submit(function(e) { var name = $("#firstname").val(); var surname = $("#lastname").val(); var email = $("#email").val(); var comment = $("#comment").val(); if(name=="" || surname=="" || email=="" || comment==""){ alert("A field is missing"); e.preventDefault(); return false; } else { return true; } }); });
＆＃13;
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <form id="userCommentForm" action="myFormHandler.php"> <table> <tr> <td>First Name:</td> <td><input id="firstname"></td> </tr> <tr> <td>Last Name:</td> <td><input id="lastname"></td> </tr> <tr> <td>Email:</td> <td><input id="email"></td> </tr> <tr> <td>Comment:</td> <td><textarea id="comment"></textarea></td> </tr> <tr> <td colspan="2"> <center> <button type="submit">Post Comment</button> </center> </td> </tr> </table> </form> </body> </html>
＆＃13;
＆＃13;
＆＃13;

Answer 2

而不是

$(document).click(function () {

...尝试......

$('#my_form_id').submit(function(){

Answer 3

似乎选择器导致问题$（文档）。您是否可以显示设置文档变量的代码部分。选择器必须是类或id。显示完整的代码和HTML。这将有助于指出正确的问题

上课时，$('.class-name')

对于id，$('#id-name')

Answer 4

为表单命名并听取提交。如果字段的值为空，则返回false。

$('#form').submit(function () {
    var name = $("#firstname").val();
    var surname = $("#lastname").val();
    var email = $("#email").val();
    var comment = $("#comment").val();

    if(!name || !surname || !email || !comment){
        alert("A field is missing");
    } else {
        return true;
    }
});

Answer 5

这对我有用。看看它是否对您有所帮助：

＆＃13;

$('#user_form').submit(function(){
  var ok = true;
  var req_field;
  $('.required').each(function() {
    req_field = $(this);
    req_field_id = $(this).attr('id');
    if($(this).val().trim() == '') {
      alert('the field ' + req_field_id + ' is empty.');
      ok = false;
    }
  });
  if(!ok) {
    return false;
  }
  return true;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="user_form">
  <input id="firstname" class="required" name="nome" type="text" placeholder="firstname*">
  <input id="lastname" class="required" name="apelido" type="text" placeholder="lastname*">	
  <input id="email" class="required" name="email" type="email" placeholder="email*">
  <input id="comment" class="required" name="comment" type="text" placeholder="comment*">	
  <input class="submit" type="submit" value="SUBMETER">
</form>

＆＃13;

单击提交按钮时的Jquery表单验证

5 个答案: