2014-01-29 35 views
0

你好,jquery阿賈克斯調用焦點方法下降問題

目前我無法驗證我的文本框通過ajax調用加載數據。

查找下面

JSP頁面的代碼片段:

<input type="text" id="carrierName_ajax" name="carrierName" class="field_size_e" onfocus="showRegion(this.value)" onBlur="checkValidCarrierName()"/> 

    <input readonly class="field_size_d block" id="tier_ajax" type="text" name="carrierTier" onkeydown="return false;"/> 

    <input readonly type="text" id="regionName_ajax" name="carrierRegion" class="field_size_e block" onkeydown="return false;"/> 

的Javascript

$(function(){ 
    $("input#carrierName_ajax").autocomplete("/maintenance/supportedCarrierSuggestions.jsp?command=supportedCarrier-suggestion", { 
    }); 

    var carrname = document.getElementById('carrierName_ajax').value; 
    if(carrname.indexOf("&") != -1){ 
    var res = carrname.replace("&","'||chr(38)||'"); 
    $.get('/maintenance/supportedCarrierSuggestions.jsp?command=supportedCarrierId-suggestion&carrier='+res,{ "_": $.now() }, function(responseData) { 
    $("#carrRefId").val(responseData); 
    }); 
    } 
    else 
    { 
    $.get('/maintenance/supportedCarrierSuggestions.jsp?command=supportedCarrierId-suggestion&carrier='+carrname,{ "_": $.now() }, function(responseData) { 
    $("#carrRefId").val(responseData); 
    }); 
    } 
    }); 

function showRegion(data){ 
     /*Modified for Defect ID :219*/ 


    if((data!=null)&&(data!="")) 
    { 

    if(data.indexOf("&") != -1){ 
    var res = data.replace("&","'||chr(38)||'"); 
    $.get('/maintenance/supportedCarrierSuggestions.jsp?command=supportedCarrierRegion-suggestion&carrier='+res,{ "_": $.now() }, function(responseData) { 
    $("#regionName_ajax").val($.trim(responseData)); 
    }); 
    $.get('/maintenance/supportedCarrierSuggestions.jsp?command=supportedCarrierTier-suggestion&carrier='+res, { "_": $.now() },function(responseData) { 
    $("#tier_ajax").val($.trim(responseData)); 
    }); 

    } 
    else{ 
     $.get('/maintenance/supportedCarrierSuggestions.jsp?command=supportedCarrierRegion-suggestion&carrier='+data,{ "_": $.now() }, function(responseData) { 
     $("#regionName_ajax").val($.trim(responseData)); 
    }); 
    $.get('/maintenance/supportedCarrierSuggestions.jsp?command=supportedCarrierTier-suggestion&carrier='+data,{ "_": $.now() }, function(responseData) { 
    $("#tier_ajax").val($.trim(responseData)); 
    }); 
    } 

    } 
    function checkValidCarrierName() 
{ 
    // alert('here'); 
    var carrierName = $('#carrierName_ajax').val(); 
    // alert(carrierName); 
    var carrRegion = document.getElementById('regionName_ajax').value; 
    //alert(carrRegion); 
    var carrTier = document.getElementById('tier_ajax').value; 
    //alert(carrTier); 

    if(carrierName==null || carrierName=="") 
    { 
      alert('Enter valid carrier name'); 
      document.getElementById('regionName_ajax').value = ""; 
      document.getElementById('tier_ajax').value = ""; 
      return false; 

    } 
    else 
     { 
     if ((carrRegion==null || carrRegion=="") || (carrTier==null || carrTier=="")) 
     { 
      alert('Enter valid carrier name :'+carrierName); 
      return false; 
     } 
     else 
     { 
      return true; 
     } 

     } 

這裏我的運營商名稱文本框中使用自動完成加載。只要在載體文本框中選擇一個值,它就會填充區域和層文本框。

現在的問題是,如果用戶在載體文本框中輸入任何錯誤的值即。 '只有我們'而不是天氣。

我必須驗證輸入的值是否有誤。我正在使用onblur函數驗證。但它甚至檢查用戶在從下拉列表選擇之前先輸入第一個字母本身

任何人都可以幫助我呢?

回答

0

您可以設置jQuery在'minLength'列表中搜索之前所需的最少字母數。例如,請參閱(http://api.jqueryui.com/autocomplete/#option-minLength)。請注意,您在初始化自動完成UI時必須設置此選項。只需在這裏添加'minLength'選項。

$("input#carrierName_ajax").autocomplete("/maintenance/supportedCarrierSuggestions.jsp?command=supportedCarrier-suggestion", {}); 

編輯: 要驗證字母,您可以使用JavaScript正則表達式:

var letters = /^[A-Za-z]+$/; //this is the pattern 
if (carrierName.match(letters)) // check if only contains alphabets 
    // yr code 
+0

感謝您的建議。我不能限制用戶輸入最小字符。如果輸入w,我的自動完成應該填充從W開始的所有結果。請你讓我知道如何限制只有字母輸入。但仍然不能解決我的問題 – Priya

+0

這似乎是我誤解了你的問題。 @Kristoffer說的是合適的。您可能要考慮使用除onBlur之外的其他事件。使用console.log()通過alert()進行調試。讓我知道。 :) – lovetostrike

+0

要將用戶輸入限制爲僅字母表,可以在'input'標籤中使用'pattern'屬性。在這裏瞭解更多(http://www.w3schools.com/tags/att_input_pattern.asp)。 – lovetostrike

1

可能我建議不使用的onblur觸發您的驗證。
我懷疑是因爲自動完成onBlur事件被觸發。

另一個建議是不會對錯誤消息使用警報,而是突出顯示文本框或在頁面本身中顯示錯誤消息。這樣它就不會在用戶輸入時破壞用戶。這樣做可能需要將驗證事件更改爲onKeyPress。