Question

要说明问题：当我提交表格时，我的功能并没有告诉我任何事情。网址会发生变化，但似乎功能未被触发。请帮忙！

<div id="contact_form">  
<form name="contact" action="">  
  <fieldset>  
    <label for="name" id="name_label">Name</label>  
    <input type="text" name="name" id="name" size="30" value="" class="text-input" />  
    <label class="error" for="name" id="name_error">This field is required.</label>  

    <label for="email" id="email_label">Return Email</label>  
    <input type="text" name="email" id="email" size="30" value="" class="text-input" />  
    <label class="error" for="email" id="email_error">This field is required.</label>  

    <label for="phone" id="phone_label">Return Phone</label>  
    <input type="text" name="phone" id="phone" size="30" value="" class="text-input" />  
    <label class="error" for="phone" id="phone_error">This field is required.</label>  

    <br />  
    <input type="submit" name="submit" class="button" id="submit_btn" value="Send" />  
  </fieldset>  
</form>  
</div>  
<script>
    $(function() {  
  $('.error').hide();  
  $(".button").click(function() {  
    // validate and process form here  

    $('.error').hide();  
      var name = $("input#name").val();  
        if (name == "") {  
      $("label#name_error").show();  
      $("input#name").focus();  
      return false;  
    }  
        var email = $("input#email").val();  
        if (email == "") {  
      $("label#email_error").show();  
      $("input#email").focus();  
      return false;  
    }  
        var phone = $("input#phone").val();  
        if (phone == "") {  
      $("label#phone_error").show();  
      $("input#phone").focus();  
      return false;  
    }  

  });  
});  
</script>

提前致谢！

PS：已经在Google上搜索过了，但没有找到好结果。

Answer 1

首先，将事件参数添加到按钮单击处理程序，如下所示：

$(".button").click(function(e)){

然后也改变

return false;

要

e.preventDefault();

编辑：

此代码适用于我。当您单击字段为空的按钮时，表单未提交，并显示第一个字段旁边的错误文本。顺便说一句，这里没有涉及到PHP，只有html和jquery。你在页面中加载jquery吗？

<div id="contact_form">  
<form name="contact" action="">  
  <fieldset>  
    <label for="name" id="name_label">Name</label>  
    <input type="text" name="name" id="name" size="30" value="" class="text-input" />  
    <label class="error" for="name" id="name_error">This field is required.</label>  

    <label for="email" id="email_label">Return Email</label>  
    <input type="text" name="email" id="email" size="30" value="" class="text-input" />  
    <label class="error" for="email" id="email_error">This field is required.</label>  

    <label for="phone" id="phone_label">Return Phone</label>  
    <input type="text" name="phone" id="phone" size="30" value="" class="text-input" />  
    <label class="error" for="phone" id="phone_error">This field is required.</label>  

    <br />  
   <input type="submit" name="submit" class="button" id="submit_btn" value="Send" />  
  </fieldset>  
</form>  
</div>  
<script>
$(function() {  
  $('.error').hide();  
  $(".button").click(function(e) {  
  // validate and process form here  

  $('.error').hide();  
    var name = $("input#name").val();  
    if (name == "") {  
      $("label#name_error").show();  
      $("input#name").focus();  
      e.preventDefault();  
      return;
   }  
    var email = $("input#email").val();  
    if (email == "") {  
  $("label#email_error").show();  
  $("input#email").focus();
  e.preventDefault();  
  return;
}  
    var phone = $("input#phone").val();  
    if (phone == "") {  
  $("label#phone_error").show();  
  $("input#phone").focus();
  e.preventDefault();  
  return;  
}  

});  
});  
</script>

Answer 2

使用它：

$('form[name="contact"]').on('submit', function() {

    $('.error').hide();  
    var name = $("input#name").val();  

    if (name.length == 0) {  
      $("label#name_error").show();  
      $("input#name").focus();  
      return false;  
    }  

    var email = $("input#email").val();  
    if (email.length == 0) {  
      $("label#email_error").show();  
      $("input#email").focus();  
      return false;  
    }  

    var phone = $("input#phone").val();  
    if (phone.length == 0) {  
      $("label#phone_error").show();  
      $("input#phone").focus();  
      return false;  
    } 

    return true; 
});

function（）没有对表单提交做出反应

2 个答案: