2011-07-30 161 views
1

我必須使用JQuery執行驗證過程。我有兩個文本框用戶名和密碼,兩個按鈕是登錄和提交。我如何點擊按鈕點擊驗證消息而不是提交按鈕

如果我點擊提交按鈕,那麼它會自動啓動驗證,以及我必須在登錄按鈕單擊時實現的此功能。

那麼我怎麼能實現按鈕點擊自動驗證?

爲什麼我想這樣:

  1. 使用設的JQuery它發送到與用戶名和在該時間期間,我將顯示處理 密碼對服務器的請求....
  2. 然後,它將通過數據庫驗證提供的值,並返回 成功或失敗,然後我將顯示成功或失敗。

這裏是代碼片段:

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> 
@Html.ValidationSummary(true, "Login was unsuccessful. Please correct the errors and try again.") 
@using (Html.BeginForm(null, null, FormMethod.Get, new { id = "Form1", name = "Form1" })) 
{ 
    <table> 
     <tr> 
      <td> 
       User Name 
      </td> 
      <td>@Html.TextBoxFor(u => u.UserName, new { id = "txtUser" }) @Html.ValidationMessageFor(u => u.UserName) 
      </td> 
     </tr> 
     <tr> 
      <td> 
       Password 
      </td> 
      <td>@Html.TextBoxFor(u => u.Password, new { id = "txtPassword" }) @Html.ValidationMessageFor(u => u.Password) 
      </td> 
     </tr> 
     <tr> 
      <td> 
      </td> 
      <td> 
       <input type="button" value="Login" onclick="checkAuthentication();" /> 
       <input type="submit" value="Submit" /> 
      </td> 
     </tr> 
     <tr> 
      <td colspan="2"> 
       <div id="dvStatus" class="loginMessageStatus"> 
       </div> 
      </td> 
     </tr> 
    </table> 
} 
<script language="javascript" type="text/javascript"> 
    function getUserCredentials() { 
     var user = jQuery('#txtUserName').val(); 
     var pass = jQuery('#txtPassword').val(); 
     return { UserName: user, Password: pass }; 
    } 
    function clearUserCredentials() { 
     jQuery('#txtUserName').val(""); 
     jQuery('#txtPassword').val(""); 
     jQuery('#txtUserName').focus(); 
    } 
    function checkAuthentication() { 
      jQuery('#dvStatus').html("<div class='requestProcess'></div><div class='requestMessage'>Please wait...</div>") 
      var postData = getUserCredentials(); 
      var ajaxResponse = $.ajax({ 
       type: "post", 
       url: '@Url.Action("Index", "Login")', 
       dataType: 'json', 
       contentType: "application/json; charset=utf-8", 
       data: JSON.stringify(postData), 
       success: function (result) { 
        var res = jQuery.parseJSON(result); 
        if (res.Success == true) { 
         jQuery('#dvStatus').html("<div class='requestSuccess'></div><div class='requestMessage'>Your are successfully logged in. Redirecting...</div>") 
         jQuery.doTimeout(100, redirectToPage); 
        } 
        else { 
         jQuery('#dvStatus').html("<div class='requestFailed'></div><div class='requestMessage'>Error: " + res.Message + ". <a href='javascript:void(0)' onclick='clearUserCredentials()'>Try Again</a></div>") 
        } 
       } 
      }); 
    } 
    function redirectToPage() { 
     href = '@Url.Action("Index", "TabMaster")'; 
     window.location.href = href; 
    } 

注: -

  1. 驗證完全與工作Submit按鈕
  2. 驗證過程與登錄按鈕完全正常工作(只是我必須整合驗證與登錄按鈕
+0

它看起來像代碼會工作,你找控制器上的代碼?我不確定你在找什麼? – Steve

+0

沒有必要在問題標題中加入[[解決]]。只要接受你自己的答案(如果可以的話),這將在主頁上標記問題,以便每個人都可以看到它的狀態。 – ChrisF

+0

好評,不幸的是它會給我留言**「你可以在2天內接受你自己的答案」**所以決定保留至少兩天解決方案,然後我會將其提交給正確答案。 – imdadhusen

回答

0

我已經解決了這一個: 我只用提交按鈕

<input id="btnLogin" type="submit" value="Login" /> 

以下是更新後的代碼

<script language="javascript" type="text/javascript"> 
    $(document).ready(function() { 
     //$.preloadCssImages(); 
     $("#btnLogin").click(function() { 
      if ($("#Form1").valid() == true) { 
       checkAuthentication(); 
       return false; 
      } 
     }); 
    }); 
    function getUserCredentials() { 
     var user = jQuery('#txtUserName').val(); 
     var pass = jQuery('#txtPassword').val(); 
     return { UserName: user, Password: pass }; 
    } 
    function clearUserCredentials() { 
     jQuery('#txtUserName').val(""); 
     jQuery('#txtPassword').val(""); 
     jQuery('#txtUserName').focus(); 
    } 
    function checkAuthentication() { 
     jQuery('#dvStatus').html("<div class='requestProcess'></div><div class='requestMessage'>Please wait...</div>") 
     var postData = getUserCredentials(); 
     var ajaxResponse = $.ajax({ 
      type: "post", 
      url: '@Url.Action("Index", "Login")', 
      dataType: 'json', 
      contentType: "application/json; charset=utf-8", 
      data: JSON.stringify(postData), 
      success: function (result) { 
       var res = jQuery.parseJSON(result); 
       if (res.Success == true) { 
        jQuery('#dvStatus').html("<div class='requestSuccess'></div><div class='requestMessage'>Your are successfully logged in. Redirecting...</div>") 
        jQuery.doTimeout(100, redirectToPage); 
       } 
       else { 
        jQuery('#dvStatus').html("<div class='requestFailed'></div><div class='requestMessage'>Error: " + res.Message + ". <a href='javascript:void(0)' onclick='clearUserCredentials()'>Try Again</a></div>") 
       } 
      } 
     }); 
    } 
    function redirectToPage() { 
     href = '@Url.Action("Index", "TabMaster")'; 
     window.location.href = href; 
    } 
</script> 
4

你可以使用用下面的事件處理程序的提交按鈕的onclick做驗證:

的標識符添加到按鈕:

<input id="SubmitButton" type="submit" value="Submit" /> 

的JavaScript:

$(document).ready(function(){ 
    $("#SubmitButton").click(function(){ 
     return checkAuthentication(); 
    }); 
}); 

更改驗證方法以返回是否失敗:

function checkAuthentication() { 
    var _user = jQuery.trim(jQuery('#txtUserName').val()); 
    var _pass = jQuery.trim(jQuery('#txtPassword').val()); 
    if (_user.length == 0 || _pass.length == 0) { 
     jQuery('#dvStatus').html("<div class='requestFailed'></div><div class='requestMessage'>User Name and Password are required!</div>") 
     return false; 
    } 
    else { 
     jQuery('#dvStatus').html("<div class='requestProcess'></div><div class='requestMessage'>Please wait...</div>") 
     var postData = getUserCredentials(); 
     var ajaxResponse = $.ajax({ 
      type: "post", 
      url: '@Url.Action("Index", "Login")', 
      dataType: 'json', 
      contentType: "application/json; charset=utf-8", 
      data: JSON.stringify(postData), 
      success: function (result) { 
       var res = jQuery.parseJSON(result); 
       if (res.Success == true) { 
        jQuery('#dvStatus').html("<div class='requestSuccess'></div><div class='requestMessage'>Your are successfully logged in. Redirecting...</div>") 
        jQuery.doTimeout(100, redirectToPage); 
       } 
       else { 
        jQuery('#dvStatus').html("<div class='requestFailed'></div><div class='requestMessage'>Error: " + res.Message + ". <a href='javascript:void(0)' onclick='clearUserCredentials()'>Try Again</a></div>") 
       } 
      } 
     }); 
     return true; 
    } 
} 

如果驗證失敗,則應該停止提交。

+0

除了使用onclick事件處理程序之外,您打算如何檢查驗證?還是使用檢查驗證方法,因爲您可以確保該字段中存在值並停止提交該方式? – Steve