Jquery验证不在多步骤表单上工作

时间:2013-10-11 23:07:55

标签: javascript jquery wordpress validation jquery-validate

我正在使用jquery validation插件,除了我的多步形式的第一页(使用重力形式创建 - wordpress)之外,它不起作用。

以前有人见过这样的事吗?

我的网址:http://breakingcapital.com/registration/

以下是使用的JS代码:

jQuery(document).ready(function($) {
$(document).ready(function(){

 $('#gform_1').validate(
 {
  rules: {
    input_18: {
      minlength: 2,
      required: true
    },
    lastname: {
      minlength: 2,
      required: true
    },
    email: {
      required: true,
      email: true
    },
    password: {
        required: true,
        minlength: 5
    },
    confirm_password: {
        required: true,
        minlength: 5,
        equalTo: "#password"
    },
    message: {
      minlength: 2,
      required: true
    },
    text: {
        minlength: 5,
        required: true

    }
  },
  highlight: function(element) {
    $(element).closest('.gfield').removeClass('success').addClass('error1');
  },
  success: function(element) {
    element
    .text('OK!').addClass('valid')
    .closest('.gfield').removeClass('error1').addClass('success');
  }
})
 });
});

以下是表单的代码:

<form method="post" enctype="multipart/form-data" target="gform_ajax_frame_1" id="gform_1" action="/registration/#gf_1">
                        <div class="gform_heading">
                            <h3 class="gform_title">testt</h3>
                            <span class="gform_description">Test</span>
                        </div>
        <div id="gf_progressbar_wrapper_1" class="gf_progressbar_wrapper">
            <h3 class="gf_progressbar_title">Step 2 of 4
        </h3>
            <div class="gf_progressbar">
                <div class="gf_progressbar_percentage percentbar_blue percentbar_50" style="width:50%;"><span>50%</span></div>
            </div></div>
                        <div class="gform_body"><div id="gform_page_1_1" class="gform_page" style="display:none;">
                                    <div class="gform_page_fields">
                            <ul id="gform_fields_1" class="gform_fields top_label description_below"><li id="field_1_2" class="gfield    required           gfield_contains_required"><label class="gfield_label" for="input_1_2">Email<span class="gfield_required">*</span></label><div class="ginput_container"><input name="input_2" id="input_1_2" type="email" value="test@test.com" class="medium" tabindex="1"></div></li><li id="field_1_5" class="gfield    required           gfield_contains_required"><label class="gfield_label" for="input_1_5">Password<span class="gfield_required">*</span></label><div class="ginput_complex ginput_container" id="input_1_5_container"><span id="input_1_5_1_container" class="ginput_left"><input type="password" name="input_5" id="input_1_5" value="test" tabindex="2"><label for="input_1_5">Enter Password</label></span><span id="input_1_5_2_container" class="ginput_right"><input type="password" name="input_5_2" id="input_1_5_2" value="test" tabindex="3"><label for="input_1_5_2">Confirm Password</label></span><div class="gf_clear gf_clear_complex"></div></div></li></ul>
                    </div>
                    <div class="gform_page_footer">
                         <input type="button" id="gform_next_button_1_12" class="button gform_next_button" value="Next" tabindex="4" onclick="jQuery(&quot;#gform_target_page_number_1&quot;).val(&quot;2&quot;); jQuery(&quot;#gform_1&quot;).trigger(&quot;submit&quot;,[true]); ">
                    </div>
                </div>
                <div id="gform_page_1_2" class="gform_page">
                    <div class="gform_page_fields">
                        <ul class="gform_fields top_label"><li id="field_1_18" class="gfield    firstname           gfield_contains_required"><label class="gfield_label" for="input_1_18">First Name<span class="gfield_required">*</span></label><div class="ginput_container"><input name="input_18" id="input_1_18" type="text" value="" class="medium" tabindex="5"></div></li><li id="field_1_17" class="gfield               gfield_contains_required"><label class="gfield_label" for="input_1_17">Last Name<span class="gfield_required">*</span></label><div class="ginput_container"><input name="input_17" id="input_1_17" type="text" value="" class="medium" tabindex="6"></div></li><li id="field_1_3" class="gfield               gfield_contains_required"><label class="gfield_label" for="input_1_3">Phone<span class="gfield_required">*</span></label><div class="ginput_container"><input name="input_3" id="input_1_3" type="tel" value="" class="medium" tabindex="7"></div></li><li id="field_1_6" class="gfield               gfield_contains_required"><label class="gfield_label" for="input_1_6">Upload your picture<span class="gfield_required">*</span></label><div class="ginput_container"><input name="input_6" id="input_1_6" type="file" value="" size="20" class="medium" tabindex="8"></div></li></ul>
                    </div>
                    <div class="gform_page_footer">
                        <input type="button" id="gform_previous_button_1_13" class="button gform_previous_button" value="Previous" tabindex="10" onclick="jQuery(&quot;#gform_target_page_number_1&quot;).val(&quot;1&quot;); jQuery(&quot;#gform_1&quot;).trigger(&quot;submit&quot;,[true]); "> <input type="button" id="gform_next_button_1_13" class="button gform_next_button" value="Next" tabindex="9" onclick="jQuery(&quot;#gform_target_page_number_1&quot;).val(&quot;3&quot;); jQuery(&quot;#gform_1&quot;).trigger(&quot;submit&quot;,[true]); ">
                    </div>
                </div>
                <div id="gform_page_1_3" class="gform_page" style="display:none;">
                    <div class="gform_page_fields">
                        <ul class="gform_fields top_label"><li id="field_1_4" class="gfield"><label class="gfield_label" for="input_1_4">Website</label><div class="ginput_container"><input name="input_4" id="input_1_4" type="url" value="" class="medium" tabindex="11" placeholder="http://"></div><div class="gfield_description">Want us to link to your website?</div></li><li id="field_1_8" class="gfield               gfield_contains_required"><label class="gfield_label" for="input_1_8">Google +<span class="gfield_required">*</span></label><div class="ginput_container"><input name="input_8" id="input_1_8" type="text" value="" class="medium" tabindex="12"></div><div class="gfield_description">This is required for google authorship. Read more here:</div></li><li id="field_1_9" class="gfield"><label class="gfield_label" for="input_1_9">Twitter</label><div class="ginput_container"><input name="input_9" id="input_1_9" type="text" value="" class="medium" tabindex="13"></div></li><li id="field_1_10" class="gfield"><label class="gfield_label" for="input_1_10">Facebook</label><div class="ginput_container"><input name="input_10" id="input_1_10" type="text" value="" class="medium" tabindex="14"></div></li><li id="field_1_11" class="gfield"><label class="gfield_label" for="input_1_11">Linkedin</label><div class="ginput_container"><input name="input_11" id="input_1_11" type="text" value="" class="medium" tabindex="15"></div></li></ul>
                    </div>
                    <div class="gform_page_footer">
                        <input type="button" id="gform_previous_button_1_16" class="button gform_previous_button" value="Previous" tabindex="17" onclick="jQuery(&quot;#gform_target_page_number_1&quot;).val(&quot;2&quot;); jQuery(&quot;#gform_1&quot;).trigger(&quot;submit&quot;,[true]); "> <input type="button" id="gform_next_button_1_16" class="button gform_next_button" value="Next" tabindex="16" onclick="jQuery(&quot;#gform_target_page_number_1&quot;).val(&quot;4&quot;); jQuery(&quot;#gform_1&quot;).trigger(&quot;submit&quot;,[true]); ">
                    </div>
                </div>
                <div id="gform_page_1_4" class="gform_page" style="display:none;">
                    <div class="gform_page_fields">
                        <ul class="gform_fields top_label"><li id="field_1_14" class="gfield               gfield_contains_required"><label class="gfield_label" for="input_1_14">Long Bio<span class="gfield_required">*</span></label><div class="ginput_container"><textarea name="input_14" id="input_1_14" class="textarea medium" tabindex="18" rows="10" cols="50"></textarea></div><div class="gfield_description">This is for your profile page. Generally 100-300 words works best. </div></li><li id="field_1_15" class="gfield               gfield_contains_required"><label class="gfield_label" for="input_1_15">Short bio<span class="gfield_required">*</span></label><div class="ginput_container"><textarea name="input_15" id="input_1_15" class="textarea medium" tabindex="19" rows="10" cols="50"></textarea><div class="charleft ginput_counter">0 of 500 max characters</div></div><div class="gfield_description">This is displayed on each and every article you write. </div></li>
                            </ul></div>
        <div class="gform_page_footer top_label"><input type="button" id="gform_previous_button_1" class="button gform_previous_button" value="Previous" tabindex="20" onclick="jQuery(&quot;#gform_target_page_number_1&quot;).val(&quot;1&quot;); jQuery(&quot;#gform_1&quot;).trigger(&quot;submit&quot;,[true]); "> <input type="submit" id="gform_submit_button_1" class="button gform_button" value="Submit" tabindex="21" onclick="if(window[&quot;gf_submitting_1&quot;]){return false;}  if( !jQuery(&quot;#gform_1&quot;)[0].checkValidity || jQuery(&quot;#gform_1&quot;)[0].checkValidity()){window[&quot;gf_submitting_1&quot;]=true;} "><input type="hidden" name="gform_ajax" value="form_id=1&amp;title=1&amp;description=1">
            <input type="hidden" class="gform_hidden" name="is_submit_1" value="1">
            <input type="hidden" class="gform_hidden" name="gform_submit" value="1">
            <input type="hidden" class="gform_hidden" name="gform_unique_id" value="525883d3eb548">
            <input type="hidden" class="gform_hidden" name="state_1" value="WyJhOjA6e30iLCI0OTY4NTBiMzg4ZDg1NTYxYmIwMzVkNDgwYTRhYTA2MyJd">
            <input type="hidden" class="gform_hidden" name="gform_target_page_number_1" id="gform_target_page_number_1" value="3">
            <input type="hidden" class="gform_hidden" name="gform_source_page_number_1" id="gform_source_page_number_1" value="2">
            <input type="hidden" name="gform_field_values" value="">

        </div>
                            </div></div>
                </form>

1 个答案:

答案 0 :(得分:0)

修正了它。只需在重力形式中禁用AJAX。