2014-06-25 121 views
0

我已经应用jQuery远程验证。成功后,我添加了一个图像对我的文本框。但是我希望在其他验证适用时删除该映像,因为我应用了多个验证。请建议。以下是我在电子邮件文本框中进行验证的代码。 jQuery的:jquery远程验证修改

/*--Validations for registeration step-1 - starts here ---*/  
    var school_url = "/" + PROJECT_NAME + "registration/get-schools-list"; 
    var company_url = "/" + PROJECT_NAME + "registration/get-all-ref-companies"; 
    autoComplete('input[type=text]#college', school_url); 
    autoComplete('input[type=text]#employed_company', company_url); 

    $("#registeration_step1").validate({ 
     rules: { 
      first_name: { 
       required: true, 
       noSpace: true, 
       alphaOnly:true, 
       minlength: 3, 
       maxlength: 30 
      }, 
      last_name: { 
       required: true, 
       noSpace: true, 
       alphaOnly:true, 
       minlength: 3, 
       maxlength: 30 
      }, 
      email: { 
       required: true, 
       email: true, 
       noSpace: true, 
       remote: { 
        url: "/"+PROJECT_NAME+"index/check-email-exist", 
        type: "post", 
        beforeSend: function() { 
         $("div#tick-box-image").html("<img style = 'margin-top: 5px;' src = '"+IMAGE_PATH+"/loading_small_black_purple.gif'>"); 
        }, 
        complete: function(data) { 
         if(data.responseText == "true") 
         { 
          $("div#tick-box-image").html("<img src = '"+IMAGE_PATH+"/tick-white.png' alt='Ok' title='Ok'>"); 
         } 
         else 
         { 
          $("div#tick-box-image").html("");       
         } 
        }, 
        data: { 
          email: function() { 
           return $("#email").val(); 
          } 
        } 
       } 
      }, 
      password: { 
       required: true, 
       ilook_password: true, 
       minlength: 8, 
       maxlength: 20, 
       noSpace: true 

      } 
     }, 
     messages: { 
      first_name:{ 
       noSpace:"Please enter valid first name" 
      }, 
      last_name:{ 
       noSpace:"Please enter valid last name" 
      }, 
      email: { 
       remote: "Not available!", 
      } 
     } 
    }); 

HTML:

<!-- Create Account Starts --> 
<div class="create-account"> 
    <h3>CREATE YOUR ACCOUNT</h3> 
    <form name="registeration_step1" id="registeration_step1" 
     method="POST" action="registration"> 
     <div class="create-account-col1"> 
      <div class="create-account-col1-left">First Name:</div> 
      <div class="create-account-col1-right"> 
       <input id="first_name" name="first_name" type="text" value="" /> 
      </div> 
     </div> 
     <div class="create-account-col1"> 
      <div class="create-account-col1-left">Last Name:</div> 
      <div class="create-account-col1-right"> 
       <input id="last_name" name="last_name" type="text" /> 
      </div> 
     </div> 
     <div class="create-account-col1"> 
      <div class="create-account-col1-left">Email:</div> 
      <div class="create-account-col1-right"> 
       <input id="email" name="email" type="text" /> 
      </div> 
      <div class="tick-box" id="tick-box-image"> 
      </div> 
     </div> 
     <div class="create-account-col1"> 
      <div class="create-account-col1-left">Password:</div> 
      <div class="create-account-col1-right"> 
       <input id="password" name="password" type="password" /> 
      </div> 
     </div> 
     <div class="join-now"> 
      <div class="join-now-left"> 
       By clicking Join Now, you agree to our <a class="text-purple-link" 
        href="javascript:;">Terms</a> and that you have read our <a 
        class="text-purple-link" href="javascript:;">Data Use Policy</a>, 
       including our <a class="text-purple-link" href="javascript:;">Cookie 
        Use</a>. 
      </div> 
      <div class="join-now-right"> 
       <input type="hidden" name="created_from" value="ilook" 
        id="created_from"> <input name="signup_submit" type="submit" 
        value="JOIN NOW" /> 
      </div> 
     </div> 
    </form> 
</div> 

服务器端脚本:

public function checkEmailExistAction() 
{ 
    $params = $this->getRequest()->getParams(); 
    $email_check = \Extended\ilook_user::isEmailExist($params['email']); 

    if($email_check){ 
     echo Zend_Json::encode(false); 
    }else{ 
     echo Zend_Json::encode(true); 
    } 
    die(); 
} 
+0

显示足够的代码来创建完整和简洁的演示。请参阅:http://stackoverflow.com/help/mcve〜显示您的'.validate()'方法的其余部分以及相关的HTML标记。 – Sparky

+0

我想看看你的代码的其余部分,因为你想要做的不应该在'remote'内完成。 – Sparky

+0

Hi @Sparky我已添加相关代码。 – Simer

回答

0

remote方法用于表单输入数据与服务器上的数据进行比较。服务器端脚本返回一个响应,指示jQuery Validation该字段是有效还是无效,如果无效,则可选地返回自定义错误消息。 这是全部remote方法应该做的。

如果您想在任何的规则被评估时执行操作,那么您不应该将此逻辑放在remote方法中。您需要使用许多可用的回调函数之一,这些回调函数在评估任何规则时触发,这就是为什么我要求查看其余代码的原因。

通常,

errorPlacement - 用于放置错误信息的布局中。默认情况下,它位于输入元素之后。

highlight - 默认情况下,用于从正在验证的元素中添加/删除无效/有效的class。与unhighlight一起使用。

unhighlight - 默认情况下,用于从正在验证的元素中删除/添加无效/有效的class。与highlight一起使用。

success - 默认情况下不使用。可选地,这用于将错误消息元素放置在有效的字段上......例如当您想要在有效字段上显示“ok”消息或绿色复选标记时。

See the documentation for all available callbacks and options

Look at the source code to see the default functions for these callbacks您可以将默认功能复制为自定义回调函数的模板。


注:

你绝对不需要在这种情况下data选项。您可以删除这一切......

data: { 
    email: function() { 
     return $("#email").val(); 
    } 
} 

remote方法被应用到名为email领域,所以默认情况下,email字段的值是已经被发送到服务器

data选项仅用于当您需要发送附加数据以及默认数据。就像您需要将密码字段的值和电子邮件地址一起发送一样。