2014-06-25 213 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選項僅用於當您需要發送附加數據以及默認數據。就像您需要將密碼字段的值和電子郵件地址一起發送一樣。