开发者

How can I maintain focus on text box being validated without locking other text boxes?

开发者 https://www.devze.com 2023-04-07 17:26 出处:网络
Here is an example of a validation method I am using: if(currentFieldCategory==\'e\') { var atpos=currentFieldValue.indexOf(\"@\");

Here is an example of a validation method I am using:

 if(currentFieldCategory=='e')
    {
        var atpos=currentFieldValue.indexOf("@");
        var dotpos=currentFieldValue.lastIndexOf(".");
        if 开发者_JS百科(atpos<1 || dotpos<atpos+2 || dotpos+2>=currentFieldValue.length) 
        {
            echo('Please enter a valid email address');
    currentField.focus();   
            return 'Please enter a valid email address';
        } 
    }

If the user does not enter a valid email then an error message is triggered. Using currentField.focus(); the focus stays on the current text box being validated, but all other text boxes are locked until the correct data is entered.

I am wondering if there is a way of maintaining the focus on the current text box without locking the other text boxes (i.e. the user can still click in other text boxes). Because my validation works both on user entry and form submission, it is OK for users to click in other text boxes even if the current text box doesn't contain the correct data.

Could someone help with this?

Thanks,

Nick


Your requirement seems contradictory: you can't "maintain focus" in one input and simultaneously allow users to click into other inputs.

A more common validation technique is onchange or onblur if a particular field fails validation set its background to a different colour, and/or display the error message beside it or something. Then the user knows which fields they need to come back to but they're still free to enter other fields first.

Having said that, if you're really keen on the focus idea, maybe you can set focus only the first time the user tries to leave the field. If they try to leave the field again allow it.

// global (or at least a higher scope variable) to keep track of which
// fields have failed; I assume your fields all have IDs set
var invalidFields = {};


// within your validation function
if(currentFieldCategory=='e')
{
   var atpos=currentFieldValue.indexOf("@");
   var dotpos=currentFieldValue.lastIndexOf(".");
   if (atpos<1 || dotpos<atpos+2 || dotpos+2>=currentFieldValue.length) 
   {
      echo('Please enter a valid email address');
      // NEW IF TEST
      // only set focus if this field didn't already fail validation
      if (!invalidFields[currentField.id]) {
        invalidFields[currentField.id] = true;
        currentField.focus();
      }
      return 'Please enter a valid email address';
   }
   invalidFields[currentField.id] = false;
}

Note: the expression in the new if test, !invalidFields[currentField.id], will be true if invalidFields doesn't have a key defined (yet) for the currentField's id, or if it does have a key defined with a corresponding value of false. I.e., if it has never previously been validated, or if the last time it was validated it passed.

(By the way, you should look into validating format with regular expressions rather than manually comparing the position of the first "@" with the last ".".)

0

精彩评论

暂无评论...
验证码 换一张
取 消