关于调用焦点方法的Jquery Ajax下拉问题

Question

你好,

目前，我无法验证通过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函数验证。但它甚至会检查用户在从填充的下拉列表中选择之前输入自己的第一个字母

有人能帮我解决这个问题吗？

Answer 1

我建议不要使用onBlur来触发您的验证。

我怀疑由于自动完成，onBlur事件正在被触发。

另一种建议是不对错误消息使用警告，而是突出显示文本框或在页面本身中显示错误消息。这样就不会在用户打字时干扰他们。执行此操作时，您可能希望将验证事件更改为onKeyPress。

Answer 2

您可以使用'minLength‘设置jQuery在列表中搜索之前所需的最小字母数。例如，请参阅(http://api.jqueryui.com/autocomplete/#option-minLength)。请注意，您必须在初始化autocomplete 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