jquery表单验证以防止提交

时间：2015-10-02 22:49:26

标签： javascript jquery html forms

我一直在尝试使用jquery来验证表单，但我遇到了一些问题。链接如下所示。

Jiddle link 

<!DOCTYPE html>
<html lang="en-ca" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="mystyle3.css">
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="//code.jquery.com/jquery-1.10.1.js"></script>
<script type="text/javascript" src="/includes/vendor/js/additional-methods.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="/includes/vendor/js/additional-methods.js"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.js"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/additional-methods.js"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
    $( "#inputform" ).validate({
        rules: {
            fname: {
                   required: true,
                   minlength: 2,
                   maxlength: 20,
                   alphanumeric: true,
                },
            lname: {
                   required: true,
                   minlength: 2,
                   maxlength: 20,
                   alphanumeric: true,
            },
            street: { 
                   required: true,
                   minlength: 4,
                   street: true,

            },
            city: { 
                   required: true,
                   minlength: 4,

            },
            birthdate: { 
                   required: true,
                   date: true,

            },
            zip: { 
                   required: true,
                   minlength: 4,
                   maxlength: 5,
                   digits: true,
                   zip: true
            }, 
            tel: { 
                   required: true,
                   minlength: 10,
                   tele: true,


            },
            birthdate:{
                    required: true,
                    check_date_of_birth: true
            },
                 email: { 
                   required: true,
                   email: true

            },


        },
        messages: {

        }
    });

    $.validator.addMethod("alphanumeric",
        function(value, element) {
            return /^[A-Za-z\d=#$%@_ -]+$/.test(value);
        },
        "Sorry, no special characters allowed");
});
    $.validator.addMethod('zip', function (value) { 
        return /^((\d{5}-\d{4})|(\d{5})|([A-Z]\d[A-Z]\s\d[A-Z]\d))$/.test(value); 
    }, 'Please enter a valid US zip code.');

    $.validator.addMethod('street', function (value) { 
        return /^[a-zA-Z0-9-\/] ?([a-zA-Z0-9-\/]|[a-zA-Z0-9-\/] )*[a-zA-Z0-9-\/]$/.test(value); 
    }, 'Please enter a valid street address.');

    $.validator.addMethod('city', function (value) { 
        return /^[a-zA-z] ?([a-zA-z]|[a-zA-z] )*[a-zA-z]$/.test(value); 
    }, 'Please enter a valid City.');

    $.validator.addMethod('tele', function (value) { 
        return /^(([2-9]{1}[0-9]{2}) |[0-9]{3}-)[0-9]{3}-[0-9]{4}$/.test(value); 
    }, 'Please enter a valid Telephone number.');
</script>

<script type="text/javascript">
$(document).ready(function(){
    var d = new Date();
    var curr_year = d.getFullYear();
    $("#txtDate").datepicker({
        yearRange: '1900:'+ curr_year,
        changeMonth:true,
        changeYear:true, maxDate: '-1d'
    });
});
</script>
<title>Assignment 3 Input form</title>
</head>
<body>
<div id='cssmenu'>
<ul>
    <li><a href="http://www.jkozla.com/default.htm"><span>Home</span></a></li>
    <li class='active has-sub'><a href='#'><span>Assignments</span></a>
    <ul>
        <li class='has-sub'><a href=http://www.jkozla.com/assignment/Assignment1.htm><span>Assignment 1</span></a>
        </li>
        <li class='has-sub'><a href=http://www.jkozla.com/assignment/Assignment2.htm><span>Assignment 2</span></a>
        </li>
        <li class='has-sub'><a href=http://www.jkozla.com/assignment/Assignment3.html><span>Assignment 3</span></a>
        </li>
        <li class='has-sub'><a href=http://www.jkozla.com/assignment/Assignment4.htm><span>Assignment 4</span></a>
        </li>
        <li class='has-sub'><a href=http://www.jkozla.com/assignment/Assignment5.htm><span>Assignment 5</span></a>
        </li>
        <li class='has-sub'><a href=http://www.jkozla.com/assignment/Assignment6.htm><span>Assignment 6</span></a>
        </li>
        <li class='has-sub'><a href=http://www.jkozla.com/assignment/Assignment7.htm><span>Assignment 7</span></a>
        </li>
        <li class='has-sub'><a href=http://www.jkozla.com/assignment/Assignment8.htm><span>Assignment 8</span></a>
        </li>
        <li class='has-sub'><a href=http://www.jkozla.com/assignment/Assignment9.htm><span>Assignment 9</span></a>
        </li>
        <li class='has-sub'><a href=http://www.jkozla.com/assignment/Assignment10.htm><span>Assignment 10</span></a>
        </li>
        <li class='has-sub'><a href=http://www.jkozla.com/assignment/Assignment11.htm><span>Assignment 11</span></a>
        </li>
    </ul>
</li>
<li class='active has-sub'><a href="#"><span>Classes</span></a>
    <ul>
        <li class='has-sub'><a href="https://cop4813eaglin.pbworks.com/w/page/34415594/FrontPage"><span>COP4813</span></a>
        </li>
        <li class='has-sub'><a href="https://cas.fsu.edu/cas/login?service=https%3A%2F%2Fcampus.fsu.edu%2Fwebapps%2Fbb-auth-provider-cas-bb_bb60%2Fexecute%2FcasLogin%3Fcmd%3Dlogin%26authProviderId%3D_105_1%26redirectUrl%3Dhttps%253A%252F%252Fcampus.fsu.edu%252Fwebapps%252Fportal%252Fframeset.jsp%26sessionIdForLogout%3DEB7D8A9EDEE7CA79B83CA34E8C9FA206"><span>MAD2104</span></a>
        </li>
    </ul>
</li>
<li class='active has-sub'><a href="#"><span>Project</span></a>

    <li class='last'><a href="mailto:jmk13c@my.fsu.edu"><span>Contact</span></a>
    </li>
</ul>
</div>

<h1>COP 4813 Form Validation</h1>

<form class="form-horizontal" id="inputform" method="POST" onsubmit="submitHandler"  action="mailto:jmk13c@my.fsu.edu" enctype="text/plain"> 
<?php
require_once('recaptchalib.php');
$publickey = "6LcFzgwTAAAAAGl09TEBMh9akRJDZwuBDZEl0qHC"; // you got this from the signup page
echo recaptcha_get_html($publickey);
?>

  <p>
    <label for="fname">First Name:&nbsp;</label>
    <input name="fname" class="fname" id="fname" type="text" name="fname" size="15" /><br><br>

    <label for="lname">Last Name:&nbsp;</label>
    <input name="lname" class="required" id="lname" type="text"  size="15" /><br><br>

    <label for="street">Street Address:&nbsp;</label>
    <input name="street" class="required" id="street" type="text" pattern="[a-zA-Z0-9\s]+" size="20" /><br><br>

    <label for="city">City:&nbsp;</label>
    <input name="city" class="required" id="city" type="text" pattern="[a-zA-Z0-9\s]+" size="15" /><br><br>

    <label for="state">State:&nbsp;</label>
        <select name="state" id="state" size="1"><br><br>
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="DC">Dist of Columbia</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="HI">Hawaii</option>
        <option value="ID">Idaho</option>
        <option value="IL">Illinois</option>
        <option value="IN">Indiana</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NV">Nevada</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NM">New Mexico</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="ND">North Dakota</option>
        <option value="OH">Ohio</option>
        <option value="OK">Oklahoma</option>
        <option value="OR">Oregon</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="SD">South Dakota</option>
        <option value="TN">Tennessee</option>
        <option value="TX">Texas</option>
        <option value="UT">Utah</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WA">Washington</option>
        <option value="WV">West Virginia</option>
        <option value="WI">Wisconsin</option>
        <option value="WY">Wyoming</option>
    </select><br><br>


    <label for="zip">Zipcode:&nbsp;</label>
    <input name="zip" class="required" id="zip" type="text" size="8" /><br><br>

    <label for="tel">Phone Number:&nbsp;</label>
    <input name="tel" class="required" id="tel" type="tel" data-mask="000 000-0000" placeholder="xxx xxx-xxxx" size="10" /><br><br>

    <label for="birthdate">DOB:&nbsp;</label>
    <input name="birthdate" type="text"  class="required" id="txtDate" placeholder="mm/dd/yyyy" size="15" /><br><br>

    <label for="email">Email:&nbsp;</label>
    <input name="email" id="email" type="email" class="required"  size="15" /><br><br>

    Message:<br>
    <textarea name="comment" required rows="4" cols="50"></textarea> <br><br>

    <div class="g-recaptcha"  data-sitekey="6LcFzgwTAAAAAGl09TEBMh9akRJDZwuBDZEl0qHC"></div>
</p>
<p><input name="send"  type="submit" value="Submit"/></p>
</form>
<div id="fixedfooter">Copyright © Jonathan Kozla. All rights reserved.</div>
</body>
</html>
  1. 如果不满足条件，我可以让它验证到它发出警告但是如果所有盒子都已填满我仍然可以提交即使它是错误的
  2. 当我使用recapcha时，网站密钥会在提交时包含在电子邮件中。

    3. 请记住，这是已经提交的作业，但对我来说，我需要知道我哪里出错了。请帮忙

1 个答案:

答案 0 :(得分：0)

e.preventDefault();可能有帮助

相关问题
最新问题