如何聚焦无效输入字段

时间:2014-01-22 07:17:17

标签: javascript html forms validation

这是我的表单验证脚本。我在这里使用了两种形式。当我聚焦文本字段时,光标在两个字段之间跳转。 http://jsfiddle.net/q9Xq6/

var $ = {
    getById: function (e) {
        return document.getElementById(e);
    },
    isEmpty: function (e, m) {
        var e = $.getById(e);
        var isValid = /[^.]/.test(e.value);
        $.showMessage(isValid, e, m);
        return isValid;
    },
    isAlpha: function (e, m) {
        var e = $.getById(e);
        var isValid = /[a-zA-Z]/.test(e.value);
        $.showMessage(isValid, e, m);
        return isValid;
    },
    isNumeric: function (e, m) {
        var e = $.getById(e);
        var isValid = /[0-9]/.test(e.value);
        $.showMessage(isValid, e, m);
        return isValid;
    },
    showMessage: function (valid, e, m) {
        if (!valid) {
            e.className = 'invalid';
            console.log(m);
            setTimeout(function () {
                e.focus();
            }, 100);

        } else {
            e.className = '';
        }
    },
    _onBlur: function (form, event, func) {
        var form = $.getById(form);
        var elements = form.getElementsByTagName('*');
        for (var i = 0; i < elements.length; i++) {
            elements[i][event] = func;
        }
    }
}


var abc = function () {
    return (
        $.isEmpty('name', 'empty message') &&
        $.isAlpha('name', 'alpha message') &&
        $.isEmpty('phone', 'empty message') &&
        $.isNumeric('phone', 'alpha message')
    );
}
var abc1 = function () {
    return (
        $.isEmpty('name1', 'empty message1') &&
        $.isAlpha('name1', 'alpha message1') &&
        $.isEmpty('phone1', 'empty message1') &&
        $.isNumeric('phone1', 'alpha message1')
    );
}
$.getById("form").onsubmit = abc;
$._onBlur("form", "onblur", abc);

$.getById("form1").onsubmit = abc1;
$._onBlur("form1", "onblur", abc1);
//$._onBlur("form","onkeyup",abc);

1 个答案:

答案 0 :(得分:0)

我们走了......试试吧,

 function validation1(reg2)
 {

    if(document.reg2.name.value=="")
 {
  alert("'Name' empty or not in proper length");
 document.reg2.name.focus();
 return false;
 }
 }

这里是上面的代码document.reg2.name.focus();用于聚焦无效输入字段,其中,

  1. reg2是表单的名称,
  2. name是表单的文本字段名称。