Question

我有以下表格，在ajax提交上一个表单后加载到灯箱中。在提交这个新表单时，jquery验证通过defualt工作，例如它识别表单在必填字段中无效是missiong但它不使用我的自定义验证（有效密码）函数用于此表单广告所以不识别密码应该是8个字符或更多。

任何帮助都将不胜感激。

jquery

$('.validate-password').validate({

   rules: {
        password: { 
            required: true,
            minlength:8
                }
            },
   messages: {
        password: {
            required: 'Create a password please',
            minlength: 'At least 8 characters please'
                }                       
           }
}); 

//submit our optin form when we are using a custom button..
$(".submit-form-with-image-button-when-ajax-created").live('click', function(e) {

    var formID = $(this).attr('href');

    //check we have a valid form..
    $(formID).validate();
    if($(formID).valid() == true){

        //its all good so lets submit the form..
        e.preventDefault();
        $('form'+formID).submit();

    } 

    return false;

});

由ajax调用返回并显示在灯箱内的表单..

<form action="/auth/create_user" method="post" class="validate-password form top-space20" style="padding-left:25px;" id="create-account-to-activate-voucher-form">

<?php //echo validation_errors(); ?>

    <div class="form-field clear">
        <input type="hidden" value="<?=$client->email;?>" name="email" class="promo-optin fl-space2 size-250" id="email">
        <input type="hidden" value="<?=(isset($client->community_member->first_name)) ? $client->community_member->first_name : '' ;?>" name="first_name" class="promo-optin fl-space2 size-250" id="optin_first_name">
        <input type="hidden" id="signup_redirect" class="" name="signup_redirect" value="<?=(isset($competition->signup_redirect_url) && $competition->signup_redirect_url != '') ? $competition->signup_redirect_url : '/';?>"/>
        <input type="hidden" id="user_dc" class="" name="user_dc" value="<?=$competition->user_dc;?>"/>
        <input type="hidden" id="user_dc_reason" class="" name="user_dc_reason" value="<?=$competition->user_dc_reason;?>"/>
        <input type="hidden" id="single_use_promotion_code" class="" name="single_use_promotion_code" value="<?=$competition_entry[0]->promotion_code;?>"/>
    </div><!-- /.form-field -->                                 

    <div class="form-field clear bt-space10 left">
        <label for="textfield" class="" style="">Create Password (8-16 characters please) <span class="required">*</span></label>
        <input type="password" id="optin_password" class="required promo-optin fl-space2 size-250 active-input "  name="password" value="<?php //echo set_value('display_position', $landing_page_description->display_position);?>"/>
    </div><!-- /.form-field -->                             

    <div class="form-field" style="position:relative; top:30px; left:-22px;">
        <a class="btn btn-large btn-green center submit-form-with-image-button-when-ajax-created" style="" alt="Claim my voucher" href="#create-account-to-activate-voucher-form">
        <span>Start Shopping</span>
        </a>
    </div><!-- /.form-field -->                                                                                             

</form>

使用的解决方案：

在原始的ajax请求运行验证后，立即对新表单ID进行验证。

我离开＆＃34;直播＆＃34;但改变了以下

$（＆＃39;＃创建帐户到激活优惠券形式＆＃39）。验证（{

rules: {
    password: { 
        required: true,
        minlength:8
                }
           },
  messages: {
    password: {
        required: 'Create a password please',
        minlength: 'At least 8 characters please'
            }                       
           }

});

Answer 1

尝试使用bind而不是live，因为live已在最新的jquery文件中弃用。

喜欢这样：

$(".submit-form-with-image-button-when-ajax-created").bind('click', function(e) {
   // do your stuff
});

当你使用ajax加载表单时，你需要再次绑定方法，因为document.ready只在第一次加载页面时绑定事件。

尝试在DOM上加载表单时再次绑定它。

在使用ajax调用加载表单后，Jquery验证无法正常工作

1 个答案: