jquery自定義驗證消息

我正在jquery中創建聯繫表單，但我在顯示自定義驗證消息時遇到了一些困難。它只顯示一個包含消息的小型彈出窗口：「請填寫表單」，而不是我指定的自定義消息。我嘗試了不同版本的驗證插件，但沒有奏效。我遵循了多個教程，並獲得了相同的結果。你們中的一些人能否將我放在正確的道路上，以便我可以自己完成這項工作？jquery自定義驗證消息

JQuery的

$(document).ready(function() { 
$('#contact_form').validate({ 
    rules: { 
     name: { 
      required: true 
     } 
    }, 
    messages: { 
     name: { 
      required: "come on, you have a name don't you?" 
     } 
    }, 
    submitHandler: function (form) { 
     $(form).ajxSubmit({ 
      type: "POST", 
      data: $(form).serialize(), 
      url: "", 
      success: function() { 
       $('#contact_form :input').attr('disabled', 'disabled'); 
       $('#contact_form').fadeTo("slow", 0.15, function() { 
        $(this).find(':input').attr('disabled', 'disabled'); 
        $(this).find('label').css('cursor', 'default'); 
        $('#success').fadeIn(); 
       }); 
      }, 
      error: function() { 
       $('#contact_form').fadeTo("slow", 0.15, function() { 
        $('#error').fadeIn(); 
       }); 
      } 
     }); 
    } 
}); 
});

HTML

<form method="post" name="contact" id="contact_form"> 
        <div class="row uniform collapse-at-2"> 
         <div class="6u"> 
          <input type="text" name="name" id="name" placeholder="Name" required="" /> 
         </div> 
         <div class="6u"> 
          <input type="email" name="email" id="email" placeholder="Email" required="" /> 
         </div> 
        </div> 
        <div class="row uniform"> 
         <div class="12u"> 
          <input type="text" name="subject" id="subject" placeholder="Subject" required="" /> 
         </div> 
        </div> 
        <div class="row uniform"> 
         <div class="12u"> 
          <textarea name="message" id="message" placeholder="Message" rows="6" required=""></textarea> 
         </div> 
        </div> 
        <div class="row uniform"> 
         <div class="12u"> 
          <ul class="actions"> 
           <li> 
            <input type="submit" class="special" value="Send Message" id="submit" name="submit" /> 
           </li> 
           <li> 
            <input type="reset" name="reset" id="reset" value="Reset Form" /></li> 
          </ul> 
         </div> 
        </div> 
       </form>

來源

2014-10-28 Nicolas Pierre

你使用jQuery驗證插件嗎？ – 2014-10-28 11:11:35

像我說的是.. – 2014-10-28 11:15:34

你沒有看到？ '來吧，你有個名字嗎？'？ – 2014-10-28 11:18:29

下面的代碼似乎對我罰款。確保你已經在所有依賴庫之前包含jQuery主庫（例如，自動完成或其他插件）

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>jQuery Autocomplete</title> 
<meta charset="utf-8"> 
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/jquery.validate.min.js"></script> 

<script> 

$(document).ready(function() { 
$('#contact_form').validate({ 
    rules: { 
     name: { 
      required: true 
     } 
    }, 
    messages: { 
     name: { 
      required: "come on, you have a name don't you?" 
     } 
    }, 
    submitHandler: function (form) { 
     $(form).ajxSubmit({ 
      type: "POST", 
      data: $(form).serialize(), 
      url: "", 
      success: function() { 
       $('#contact_form :input').attr('disabled', 'disabled'); 
       $('#contact_form').fadeTo("slow", 0.15, function() { 
        $(this).find(':input').attr('disabled', 'disabled'); 
        $(this).find('label').css('cursor', 'default'); 
        $('#success').fadeIn(); 
       }); 
      }, 
      error: function() { 
       $('#contact_form').fadeTo("slow", 0.15, function() { 
        $('#error').fadeIn(); 
       }); 
      } 
     }); 
    } 
}); 
}); 

</script> 
</head> 

<body> 

<form method="post" name="contact" id="contact_form"> 
        <div class="row uniform collapse-at-2"> 
         <div class="6u"> 
          <input type="text" name="name" id="name" placeholder="Name" required="" /> 
         </div> 
         <div class="6u"> 
          <input type="email" name="email" id="email" placeholder="Email" required="" /> 
         </div> 
        </div> 
        <div class="row uniform"> 
         <div class="12u"> 
          <input type="text" name="subject" id="subject" placeholder="Subject" required="" /> 
         </div> 
        </div> 
        <div class="row uniform"> 
         <div class="12u"> 
          <textarea name="message" id="message" placeholder="Message" rows="6" required=""></textarea> 
         </div> 
        </div> 
        <div class="row uniform"> 
         <div class="12u"> 
          <ul class="actions"> 
           <li> 
            <input type="submit" class="special" value="Send Message" id="submit" name="submit" /> 
           </li> 
           <li> 
            <input type="reset" name="reset" id="reset" value="Reset Form" /></li> 
          </ul> 
         </div> 
        </div> 
       </form> 
</body> 
</html>

來源

2014-10-28 11:24:10

當我使用單獨的文件時，它爲什麼不起作用？ – 2014-10-28 11:29:47

分開的文件意味着什麼？ – 2014-10-28 11:30:23

沒關係.... – 2014-10-28 11:42:47

jquery自定義驗證消息

回答

相關問題