-3

登録フォームを作成しましたが、javascript または jquery を使用して検証したいと考えています。

条件は ajax のようなもので、すべての検証が正しくなるまでフォームを送信する必要はありません。

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

<div><ul class="menusubnav">
<li class="orange"><a href="">Manager</a></li>
<li><a href="">New Customer</a></li>
<li><a href="">Edit Customer</a>
<li><a href="">Delete Customer</a></li>
<li><a href="newaccount.html">New Account</a></li>
<li><a href="">Edit Account</a></li>
<li><a href="">Delete Account</a></li>
</ul></div>
<table class="layout" border="0" width="50%" align="center">
<form name="addcust" method="post" action="" id="form1">
    <td colspan="2">
    <table border="0" align="center">
        <tr>
            <td align="center" colspan="2">
            </td>
        </tr>
        <tr>
            <td colspan="2"><p class="maintitle">Add New Customer</p></td>
        </tr>
        <tr>
        </tr>
        <tr>
        </tr>
        <tr>
            <td class="fontstyle">Customer Name<span></span></td>
            <td class="fontstyle"><input type="text" name="name"></td>
        </tr>
        <tr>
            <td class="fontstyle">Gender<span></span></td><td class="fontstyle">
                <input type ="radio" name ="rad1" value="1" checked>male</br>
                <input type ="radio" name ="rad1" value="1">female
            </td>
        </tr>
        <tr>
            <td class="fontstyle">Date of Birth <span></span></td>
            <td class="fontstyle"> <select name ="day">
                <option value ="1">1</option>
                <option value ="2">2</option>
                <option value ="3">3</option>
                <option value ="4">4</option>
                <option value ="5">5</option>
                <option value ="6">6</option>
                <option value ="7">7</option>
                <option value ="8">8</option>
                <option value ="9">9</option>
                <option value ="10">10</option>
                <option value ="11">11</option>
                <option value ="12">12</option>
                <option value ="13">13</option>
                <option value ="14">14</option>
                <option value ="15">15</option>
                <option value ="16">16</option>
                <option value ="17">17</option>
                <option value ="18">18</option>
                <option value ="19">19</option>
                <option value ="20">20</option>
                <option value ="21">21</option>
                <option value ="22">22</option>
                <option value ="23">23</option>
                <option value ="24">24</option>
                <option value ="25">25</option>
                <option value ="26">26</option>
                <option value ="27">27</option>
                <option value ="28">28</option>
                <option value ="29">29</option>
                <option value ="30">30</option>
                <option value ="31">31</option>
            </select>
            <select name ="month">
                <option value ="1">JAN</option>
                <option value ="2">FEB</option>
                <option value ="3">MAR</option>
                <option value ="4">APR</option>
                <option value ="5">MAY</option>
                <option value ="6">JUN</option>
                <option value ="7">JUL</option>
                <option value ="8">AUG</option>
                <option value ="9">SEP</option>
                <option value ="10">OCT</option>
                <option value ="11">NOV</option>
                <option value ="12">DEC</option>
            </select>
            <select name ="year">
            <option value ="1980">1980</option>
            <option value ="1981">1981</option>
            <option value ="1982">1982</option>
            <option value ="1983">1983</option>
            <option value ="1984">1984</option>
            <option value ="1985">1985</option>
            <option value ="1986">1986</option>
            <option value ="1987">1987</option>
            <option value ="1988">1988</option>
            <option value ="1989">1989</option>
            <option value ="1990">1990</option>
            <option value ="1991">1991</option>
            <option value ="1992">1992</option>
            <option value ="1993">1993</option>
            <option value ="1994">1994</option>
            <option value ="1995">1995</option>
            <option value ="1996">1996</option>
            <option value ="1997">1997</option>
            <option value ="1998">1998</option>
            <option value ="1999">1999</option>
            <option value ="2000">2000</option>
            <option value ="2001">2001</option>
            <option value ="2002">2002</option>
            <option value ="2003">2003</option>
            <option value ="2004">2004</option>
            <option value ="2005">2005</option>
            <option value ="2006">2006</option>
            <option value ="2007">2007</option>
            <option value ="2008">2008</option>
            <option value ="2009">2009</option>
            <option value ="2010">2010</option>
            <option value ="2011">2011</option>
            <option value ="2012">2012</option>
            <option value ="2013">2013</option>
            <option value ="2014">2014</option>
            <option value ="2015">2015</option>
            <option value ="2016">2016</option>
            <option value ="2017">2017</option>
        </select>
    </td>
</tr>
<tr>
    <td class="fontstyle">Address<span></span></td>
    <td class="fontstyle">
        <textarea rows="5" cols="20" name="addr" maxlength="50"></textarea>
    </td>
</tr>
<tr>
    <td class="fontstyle">City<span></span></td><td class="fontstyle"><input type="text" name="city" maxlength="25"></td>
</tr>
<tr>
    <td class="fontstyle">State<span></span></td><td class="fontstyle"><input type="text" name="state" maxlength="25"></td>
</tr>
<tr>
    <td class="fontstyle">PIN<span></span></td><td class="fontstyle"><input type="text" name="pin" maxlength="6"></td>
</tr>
<tr>
    <td class="fontstyle">Telephone Number<span></span></td><td class="fontstyle"><input type="text" name="tel" maxlength="15"></td>
</tr>
<tr>
    <td class="fontstyle">Fax<span></span></td><td class="fontstyle"><input type="text" name="fax" maxlength="15"></td>
</tr>
<tr>
    <td class="fontstyle">E-mail<span></span></td><td class="fontstyle"><input type="text" name="email" maxlength="30"></td>
</tr>
<tr>
    <td class="fontstyle">User Id<span></span></td><td class="fontstyle"><input type="text" name="uid" maxlength="30"></td>
</tr>
<tr>
        <td class="fontstyle"></td>
        <td class="fontstyle"><input type ="Submit" value ="Submit" name ="sub" onClick="validate();" class = "button">
        <input type ="reset" value ="Reset" name ="res" class = "button"></td>
</tr>
</form>
</table>
<p align="right"><a href="homepage.html">Home</a></p>

ここに私のjscriptがあります

$(document).ready(function(){

    $('form#form1 .submit').click(function(){

        $('#form1 .error').hide();  //if error visibile, hide on new click

        var name = $('input#name').val();
         var numbers = /^[0-9]+$/;  
        if (name == "" || name == " " ) {
            $('input#name').focus().before('<div class="error">Hey, what is you name!?</div>');
            return false;
        }else if(name.value.match(numbers)){
             $('input#name').focus().before('<div class="error">Hey, what is you name!?</div>');
            return false;
        }

        var addr = $('input#addr').val();
        if (addr == "" || addr == " " ) {
            $('input#addr').focus().before('<div class="error">Hey, what is you Address!?</div>');
            return false;
        }

        var city = $('input#city').val();
        if (city == "" || city == " " ) {
            $('input#city').focus().before('<div class="error">Hey, what is you city!?</div>');
            return false;
        }else if(city.value.match(numbers)){
             $('input#city').focus().before('<div class="error">Hey, what is you city!?</div>');
            return false;
        }

        var state = $('input#state').val();
        if (state == "" || state == " " ) {
            $('input#state').focus().before('<div class="error">Hey, what is you state!?</div>');
            return false;
        }else if(state.value.match(numbers)){
             $('input#state').focus().before('<div class="error">Hey, what is you state!?</div>');
            return false;
        }

        var pin = $('input#pin').val();
        var pincode = /^\d{10}$/; 
        if (pin == "" || pin == " " ) {
            $('input#pin').focus().before('<div class="error">Hey, what is you pinncode!?</div>');
            return false;
        }else if(pin.value.match(pincode)){
             return true;
        }else{
            $('input#pin').focus().before('<div class="error">Hey, what is you pincode!?</div>');
            return false;
        }

        var tel = $('input#tel').val();
        var telephone = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/; 
        if (tel == "" || tel == " " ) {
            $('input#tel').focus().before('<div class="error">Hey, what is you telephone number!?</div>');
            return false;
        }else if(tel.value.match(telephone)){
             return true;
        }else{
            $('input#tel').focus().before('<div class="error">Hey, what is you telephone number!?</div>');
            return false;
        }

        var email_test = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
        var email = $('input#email').val();
        if (email == "" || email == " ") {
           $('input#email').focus().before('<div class="error">Psst. You missed one.</div>');
           return false;
        } else if (!email_test.test(email)) {
           $('input#email').select().before('<div class="error">I think your email is wrong...</div>');
           return false;
        }

        var message = $('#message').val();
        if (message == "" || message == " " || message == "Message") {
            $('#message').focus().fadeIn('slow').before('<div class="error">Oops! You forgot to type a message!</div>');
            return false;
        }

        var data_string = $('form#form1').serialize();

        $.ajax({
            type:       "POST",
            url:        "email.php",
            data:       data_string,
            success:    function() {

        $('form#form1').slideUp('fast').before('<div id="success"></div>');
        $('#success').html('<h3>Success</h3><p>Your email has been sent.</p>').slideDown(9000);

            }//end success function


        }) //end ajax call

        return false;


    }) //end click function

    var current_data = new Array();

    $('.clear').each(function(i){
        $(this).removeClass('clear').addClass('clear'+i);
        current_data.push($(this).val());

        $(this).focus(function(){
            if($(this).val() == current_data[i]) {
                $(this).val('');
            }
        });
        $(this).blur(function(){
            var stored_data = current_data[i];
            if($(this).val()==''){
                $(this).val(stored_data);
            }
        })
    });
})

これが私のjsfiddle です。私が間違っている場所を提案してください。助けてください。

4

5 に答える 5

2

この更新されたフィドルを確認してください: http://jsfiddle.net/akkL3/1/

あなたのコードには多くの問題があります。ただし、簡単に始めるために、いくつかの基本的なものを次に示します。

初め：

コードで次のような「名前」を使用している場合:

<input type="text" name="name">

次に、セレクターは$('input[name="name"]').val();

さらに良いことに、次idのように 'sを使用する必要があります。

<input type="text" id="name">

その後、セレクターはそのままにすることができます$('input#name').val();

2番：

次のように送信ボタンを宣言しています。

<input type ="Submit" value ="Submit" name ="sub" onclick="validate();"...

そして、あなたもclick目立たないように縛っています！

$('form#form1 .submit').click(function(){...

1 つのアプローチを使用する必要がありますが、目立たないことが望ましいです。ただし、ここでは単純にするために、目立たないバインディングを削除してみましょう。したがって、validate代わりに関数になります。

function validate() { ...

onclickそして、インラインハンドラでそれを返す必要があります。

<input type ="Submit" value ="Submit" onclick="return validate()" ...

これらのいくつかの変更だけで、コードが機能するようになります。ただし、ここから先に進むにはさらに作業が必要です。

于 2013-10-18T09:09:18.177 に答える
1

送信が最初に行われ、クリックが 2 番目に行われると思います。

おそらく、HTMLでsubmit toボタンの入力タイプを変更し、de js内でjquery（.submit（））を使用してフォームを送信すると、検証がOKになります。

于 2013-10-18T08:53:16.263 に答える
1

あなたのhtmlには多くの間違いがあります。

submit1)送信ボタンにクラスがありません。

<input type ="Submit" value ="Submit" name ="sub" onClick="validate();" class = "button">

$('form#form1 .submit').click(function(){  // So this will never hapen

2) 呼ばれるIDはありませんname

<input type="text" name="name">
var name = $('input#name').val();  //This won't work

すべての属性で同様の間違い。

より良いアプローチ

1).submit()のように使う

$('#form1').submit(function(){

2) jQuery validationやvalidationEngineなどのいくつかの検証プラグインに移動します。

于 2013-10-18T08:55:25.180 に答える
0 
 $("#form1").submit(function(){   
        $('#form1 .error').hide();  //if error visibile, hide on new click
         var name = $('input#name').val();
         var numbers = /^[0-9]+$/;  
         if (name == "" || name == " " ) {
            $('input#name').focus().before('<div class="error">Hey, what is you name!?</div>');
         return false;
        }else if(name.value.match(numbers)){
             $('input#name').focus().before('<div class="error">Hey, what is you name!?</div>');
            return false;
        }

        var addr = $('input#addr').val();
        if (addr == "" || addr == " " ) {
            $('input#addr').focus().before('<div class="error">Hey, what is you Address!?</div>');
            return false;
        }

        var city = $('input#city').val();
        if (city == "" || city == " " ) {
            $('input#city').focus().before('<div class="error">Hey, what is you city!?</div>');
            return false;
        }else if(city.value.match(numbers)){
             $('input#city').focus().before('<div class="error">Hey, what is you city!?</div>');
            return false;
        }

        var state = $('input#state').val();
        if (state == "" || state == " " ) {
            $('input#state').focus().before('<div class="error">Hey, what is you state!?</div>');
            return false;
        }else if(state.value.match(numbers)){
             $('input#state').focus().before('<div class="error">Hey, what is you state!?</div>');
            return false;
        }

        var pin = $('input#pin').val();
        var pincode = /^\d{10}$/; 
        if (pin == "" || pin == " " ) {
            $('input#pin').focus().before('<div class="error">Hey, what is you pinncode!?</div>');
            return false;
        }else if(pin.value.match(pincode)){
             return true;
        }else{
            $('input#pin').focus().before('<div class="error">Hey, what is you pincode!?</div>');
            return false;
        }

        var tel = $('input#tel').val();
        var telephone = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/; 
        if (tel == "" || tel == " " ) {
            $('input#tel').focus().before('<div class="error">Hey, what is you telephone number!?</div>');
            return false;
        }else if(tel.value.match(telephone)){
             return true;
        }else{
            $('input#tel').focus().before('<div class="error">Hey, what is you telephone number!?</div>');
            return false;
        }

        var email_test = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
        var email = $('input#email').val();
        if (email == "" || email == " ") {
           $('input#email').focus().before('<div class="error">Psst. You missed one.</div>');
           return false;
        } else if (!email_test.test(email)) {
           $('input#email').select().before('<div class="error">I think your email is wrong...</div>');
           return false;
        }

        var message = $('#message').val();
        if (message == "" || message == " " || message == "Message") {
            $('#message').focus().fadeIn('slow').before('<div class="error">Oops! You forgot to type a message!</div>');
            return false;
        }

        var data_string = $('form#form1').serialize();

        $.ajax({
            type:       "POST",
            url:        "email.php",
            data:       data_string,
            success:    function() {

        $('form#form1').slideUp('fast').before('<div id="success"></div>');
        $('#success').html('<h3>Success</h3><p>Your email has been sent.</p>').slideDown(9000);

            }//end success function


        }) //end ajax call

}); 

and remove validate function from submit btn and check id of inputs.
于 2013-10-18T08:55:14.940 に答える