0

直截了当地说：当我提交表单时，我的功能没有告诉我任何事情。网址发生了变化，但似乎没有触发该功能。请帮忙！

<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上搜索过，但没有找到好的结果。

4

2 回答 2

0

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

$(".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>
于 2013-09-20T17:33:40.040 回答
0

Use it:

$('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; 
});
于 2013-09-20T17:50:26.013 回答