簡體   English   中英

如何聚焦無效的輸入字段

[英]How to focus invalid input field

這是我的表單驗證腳本。 我在這里使用了兩種形式。 當我聚焦文本字段時,光標在兩個字段之間跳轉。 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);

我們開始...試試這個,

 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是表單的文本字段名稱。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM