Question

您好，

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

找到下面的代码段

JSP PAGE：

    <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

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

2 个答案: