Question

我一直在努力让这个验证插件在jquery中工作，而且根本没有运气。

我正在使用的代码如下。

<head>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.3.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js"></script>
</head>

<script type="text/javascript">
    //Jquery Validation, Opening Jquery etc

    $(function(){

        $("#step1form").validate({
            rules: {
                firstName: {
                    required: true
                }
            }
        });
    });


</script>
<div class="info">We would love to help you out just give us a few details and you'll be on your way!</div>
    <form id="step1form" action="" method="POST">
    <input name="firstName" style="width: 100%; margin: 3px 0 3px 0; padding-right: 1%;" type="text" id="firstName" placeholder="First Name (Required)" onfocus="this.placeholder=''" onblur="this.placeholder='First Name (Required)'">
    <input style="width: 100%; margin: 3px 0 3px 0; padding-right: 1%;" type="text" id="lastName" placeholder="Surname (Required)" onfocus="this.placeholder=''" onblur="this.placeholder='Surname (Required)'">
    <input style="width: 100%; margin: 3px 0 3px 0;" type="text" id="emailaddress" placeholder="Email (Required)" onfocus="this.placeholder=''" onblur="this.placeholder='Email (Required)'">
    <input style="width: 100%; margin: 3px 0 3px 0;" type="text" id="mobile" placeholder="Mobile Number (Required)" onfocus="this.placeholder=''" onblur="this.placeholder='Mobile Number (Required)'"><br/><br/>
    <input style="float: right; width: 150px;" type="submit" name="submitstep0" value="Next Step"/>
    </form>

我不知道它为什么不起作用，但非常感谢任何帮助。

Answer 1

你做的一切都是对的但是错过了一件事，您必须指定每个输入类型的名称，因为验证插件适用于元素名称。

＆＃13;

<html>
    <head>
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.3.min.js"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            //Jquery Validation, Opening Jquery etc

            $(function(){

                $("#step1form").validate({
                    rules: {
                        firstName: {
                            required: true
                        },
                        lastName: {
                            required: true
                        },
                        email: {
                            required: true
                        },
                        mobile: {
                            required: true
                        }
                    }
                });
            });


        </script>
        <div class="info">We would love to help you out just give us a few details  and  you'll be on your way!</div>
            <form id="step1form" action="" method="POST">
                <input name="firstName" style="width: 100%; margin: 3px 0 3px 0; padding-right: 1%;" type="text" id="firstName" placeholder="First Name (Required)" onfocus="this.placeholder=''" onblur="this.placeholder='First Name (Required)'">
                <input name="lastName" style="width: 100%; margin: 3px 0 3px 0; padding-right: 1%;" type="text" id="lastName" placeholder="Surname (Required)" onfocus="this.placeholder=''" onblur="this.placeholder='Surname (Required)'">
                <input name="email" style="width: 100%; margin: 3px 0 3px 0;" type="text" id="emailaddress" placeholder="Email (Required)" onfocus="this.placeholder=''" onblur="this.placeholder='Email (Required)'">
                <input name="mobile"style="width: 100%; margin: 3px 0 3px 0;" type="text" id="mobile" placeholder="Mobile Number (Required)" onfocus="this.placeholder=''" onblur="this.placeholder='Mobile Number (Required)'"><br/><br/>
                <input style="float: right; width: 150px;" type="submit" name="submitstep0" value="Next Step"/>
            </form>
        </div>
     </body>
    </html>

＆＃13;

Answer 2

验证适用于输入的“type”属性。因此，请更改电子邮件和手机号码的类型，如下所示。

<form id="step1form" action="" method="POST">
    <input name="firstName" style="width: 100%; margin: 3px 0 3px 0; padding-right: 1%;" type="text" id="firstName" placeholder="First Name (Required)" onfocus="this.placeholder=''" onblur="this.placeholder='First Name (Required)'">
    <input style="width: 100%; margin: 3px 0 3px 0; padding-right: 1%;" type="text" id="lastName" placeholder="Surname (Required)" onfocus="this.placeholder=''" onblur="this.placeholder='Surname (Required)'">
    <input style="width: 100%; margin: 3px 0 3px 0;" type="email" id="emailaddress" placeholder="Email (Required)" onfocus="this.placeholder=''" onblur="this.placeholder='Email (Required)'">
    <input style="width: 100%; margin: 3px 0 3px 0;" type="number" id="mobile" placeholder="Mobile Number (Required)" onfocus="this.placeholder=''" onblur="this.placeholder='Mobile Number (Required)'"><br/><br/>
    <input style="float: right; width: 150px;" type="submit" name="submitstep0" value="Next Step"/>
    </form>

希望这会有所帮助!!

Jquery验证无法在网站上运行

2 个答案: