自定义表单消息与validate()冲突

时间:2014-04-08 13:22:50

标签: jquery forms validation

我创建了一个表单。但是,我的自定义表单错误消息的脚本不会显示。验证时仅显示默认错误消息。

之前我创建了一个表单,两者完美地结合在一起。现在唯一的区别是我使用formlabels.js使标签在表单上消失。

以下是代码:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/additional-methods.js"></script>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>

以下是验证码:

<script type="text/javascript">
$(document).ready(function() {

    $('#example_contact').validate({ // initialize the plugin
    errorElement: 'div',
    // your other rules and options
    position: "center right",
offset: [8,15]
    });

});


</script>        

这是formlabels js文件:

<script src="js/jquery.formLabels.js"></script> 

<link type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/ui-darkness/jquery-ui.css" rel="stylesheet" />
<link type="text/css" rel="stylesheet" href="http://o2v.net/wp-content/plugins/syntax-highlighter-and-code-prettifier/styles/shCore.css" />
<link type="text/css" rel="stylesheet" href="http://o2v.net/wp-content/plugins/syntax-highlighter-and-code-prettifier/styles/shThemeDefault.css" />

<script type="text/javascript" src="http://o2v.net/wp-content/plugins/syntax-highlighter-and-code-prettifier/scripts/shCore.js"></script>
<script type="text/javascript" src="http://o2v.net/wp-content/plugins/syntax-highlighter-and-code-prettifier/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="http://o2v.net/wp-content/plugins/syntax-highlighter-and-code-prettifier/scripts/shBrushJScript.js"></script>

这也是一个formlabels .js文件

<script type="text/javascript" src="js/init.js"></script>

以下是自定义错误消息的代码。我在外部.js文件中有它:

<script type="text/javascript">
jQuery.extend(jQuery.validator.messages, {
required: "This is a required field.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
number: "Please enter a valid number.",
digits: "Please enter only digits.",
creditcard: "Please enter a valid credit card number.",
equalTo: "Email and Confirm Email fields do not match",
accept: "Please enter a value with a valid extension.",
maxlength: jQuery.validator.format("Please enter no more than {0} characters."),
minlength: jQuery.validator.format("Please enter at least {0} characters."),
rangelength: jQuery.validator.format("Please enter a value between {0} and {1} characters long."),
range: jQuery.validator.format("Please enter a value between {0} and {1}."),
max: jQuery.validator.format("Please enter a value less than or equal to {0}."),
min: jQuery.validator.format("Please enter a value greater than or equal to {0}.")
});
</script>

这是HTML:

<div id="form_container">   
    <form method="post" action="/cgi-bin/form-mail.cgi" name="example_contact" id="example_contact">
    <input type="hidden" name="recipient" value="you@your-domain-hosting-this-script.com">
    <input type="hidden" name="env_report" value="REMOTE_HOST,REMOTE_ADDR,HTTP_USER_AGENT">
    <input type="hidden" name="redirect" value="thankyou.html">

        <div id="form_block">
            <p class="field_n"><input type="text" name="name" id="name" title="Name" minlength="5" maxlength="12" /></p>

            <p class="field_e"><input type="email" name="email" id="email" class="required email" title="Email*" /></p>

            <p class="field_ce"><input type="email" name="emailConfirm" id="emailConfirm" class="required email" equalTo='#email' title="Confirm Email*" /></p>

            <p class="field_T"><textarea rows="10" cols="28" id="message" name="message" title="Message*" class="required"></textarea></p>
        </div>

        <ul class="check_box">
            <li>
                <input type="checkbox" id="terms" name="terms" value="terms" class="required"/>
                <label for="terms"><span class="check"></span>Click here to accept our <a class="terms_link" href="terms.html">terms of service</a><span class="asterix">&#42;</span></label>                   
            </li>
        </ul>
        <p class="submit"><button type="submit">SUBMIT</button></p>

        </form> 
    </div>

如果有人可以提供帮助,我将感激不尽。我已经尝试删除所有脚本引用,但它仍然没有工作。唯一有所作为的是不使用冲突,但所有实现的目的是使错误消息完全消失。我只是一名拥有多年前基本js技能的网页设计师,我无法记住。因此,答案可以尽可能简单地显示,请:o)

0 个答案:

没有答案