-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>

这是我的脚本

$(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();

第二：

您正在声明您的提交按钮，如下所示：

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

然后你也在click悄悄地绑定！

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

您必须使用一种方法，最好是不引人注目的。然而，为了简单起见，让我们移除不显眼的绑定。所以，它变成了一个validate函数：

function validate() { ...

然后，您需要在 inline 处理程序中返回它onclick：

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

只需这几项更改将使您的代码正常工作。但是，您需要做更多的工作才能从这里继续前进。

于 2013-10-18T09:09:18.177 回答
1

我认为提交是第一位的，点击是第二位的。

也许如果您在 HTML 中更改提交到按钮的输入类型，并在 de js 中在验证正常时使用 jquery (.submit()) 提交表单。

于 2013-10-18T08:53:16.263 回答
1

您的 html 中有很多错误。

1）提交按钮中没有类submit。

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

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

2) is no id calledname

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

所有属性中的类似错误。

更好的方法

1）使用.submit()喜欢

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

2) 转移到一些验证插件，如jQuery 验证或validaionEngine。

于 2013-10-18T08:55:25.180 回答
0

如果我是你，我只会使用 html5 验证，并为不支持本机 html5 验证的浏览器提供服务器端验证回退。无论如何，您应该始终拥有服务器端验证后备，因为它太容易绕过 javascript 验证。

只需添加属性即可使用 html5 验证

required="required"

到您的输入字段，浏览器将为您完成其余的工作。

如果您真的不应该默认停止表单提交，那么只有在满足所有条件时才提交它，而不是相反。

IE

//On submit of the form
$("form").submit(function(e){

    //stop the form from submitting
    e.preventDefault();

    //set an error var
    var error = false;

    //perform your checks here
    //ie
    var val = $(this).find("input[name='name']").val();
    if(val == ""){
        var error = true;
    }

    //if there are no errors then submit the form
    if(!errors){

        //only chose one of the next two options

        //option 1 - submit normally
        $(this).submit();

        //option 2 - submit via ajax
        var data = $(this).serialize();
        $.ajax({
            data         : data,
            dataType     : "json",
            url          : "url you want to submit to",
            type         : "post",
            success      : function(response){
                 console.log(response);
            },
            error        : function(a,b,c){
                 console.log(a,b,c);
            }
        });

    }else{
        //there have been errors so tell the user in some way
    }

});

希望这可以帮助。

于 2013-10-18T09:05:50.737 回答
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 回答