javascript - Name、City、State などの形式の複数の要素を 1 つの関数でリアルタイムで検証する方法は?

Question

名前、都市、州などのフィールドを検証するために、JavaScript で共通の関数を 1 つ作成したいと考えています。これは 3 つのフィールドすべてに適用できます 1) 名前 2) 都市 3) 州

ここにhtmlのコードがあります

<form name="addcust" method="POST" action="insrtCustomer.php" id="form1">
<table>
    <tr>
            <td>Customer Name</td>
            <td><input type="text" name="name" id="name"><label id="message"></label></td>
            <td>City</td><td><input type="text" name="city" maxlength="25"></td>
    </tr>
    <tr>
            <td>State</td><td><input type="text" name="state" maxlength="25"></td>
    </tr>
</table>

リアルタイムの検証に使用でき、複数のフォームに適用できる 1 つの関数を作成したいと考えています。ご存知のように、ウェブサイトのすべてのフォームには異なる名前が付いています。どのように使用できるか、これを行うためのアイデアをここに提供してください。だから助けてください

Answer 1

これを試して、それに応じてカスタマイズできます | デモ

検証関数でフォーム（this）を渡すだけで、すべてのテキストボックスが空かどうかがチェックされます。用途に応じて変更できます

<form name="addcust" method="POST" action="insrtCustomer.php" id="form1" onsubmit="return validate(this)">
<table>
    <tr>
            <td>Customer Name</td>
            <td><input type="text" name="name" id="name"><label id="message"></label></td>
            <td>City</td><td><input type="text" name="city" maxlength="25"></td>
    </tr>
    <tr>
            <td>State</td><td><input type="text" name="state" maxlength="25"></td>
    </tr>
</table>
                <input type="submit" value="submit">
                </form>

Javascript

function validate(dis)
{
    var ele = dis.getElementsByTagName("input");
    for(var i=0;i<ele.length;i++)
    {
         if(ele[i].getAttribute("type") == "text")
         {
                if(ele[i].value == "")
                {
                    alert(ele[i].getAttribute('name')+" is required feild");
                    ele[i].focus();
                    return false;
                }
         }

        // you can check for radio and checkboxes
        //eg :  if(ele[i].getAttribute("type") == "radio")
        // {
                // Your code here     
        // }
    }

 return true; // to prevent from form submission use false
}

特殊文字をチェックしたい場合

function validate(dis)
{
    var filter = /^[A-Za-z0-9]+$/;
    var ele = dis.getElementsByTagName("input");
    for(var i=0;i<ele.length;i++)
    {
         if(ele[i].getAttribute("type") == "text")
         {
                if(ele[i].value == "")
                {
                    alert(ele[i].getAttribute('name')+" is required feild");
                    ele[i].focus();
                    return false;
                }
                else if(!filter.test(ele[i].value))
                {
                    alert(ele[i].getAttribute('name')+" requires letters and numbers only");
                    ele[i].focus();
                    return false;
                }else;
         }

        // you can check for radio and checkboxes
        //eg :  if(ele[i].getAttribute("type") == "radio")
        // {
                // Your code here     
        // }
    }

 return true; // to prevent from form submission use false
}

Answer 2

jqueryファイルの後にjquery検証ファイルをhtmlページに含めます

     $('#yourFormId').validate({
              rules:{
               name: {
                    required: true
                },
                city: {
                    required:true
                },
               state: {
                    required:true
                }
            },
            messages: {
                name:{
                    required: 'required msg' 
                },
  city:{
                    required: 'required msg' 
                },  state:{
                    required: 'required msg' 
                }

            },
            submitHandler: function(form){

            }
        });

これがうまくいくことを願っています...

Answer 3

この例の JQuery Validationを試すことができます