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

Question

你好，

目前我无法验证通过 ajax 调用加载数据的文本框。

在下面找到代码sn-p

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)。请注意，您必须在初始化自动完成 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