使用jQuery验证各种输入时遇到麻烦

Question

for a class project I have to build a website for a pet store, featuring a pet grooming service. 对于班级项目，我必须为宠物商店建立一个网站，提供宠物美容服务。 This involves a form, php and a mysql server on my localhost. 这涉及到本地主机上的表单，php和mysql服务器。 I have been unable to correctly validate this form via a jQuery validator plugin for some unknown (to me) reason. 由于某些未知的原因，我无法通过jQuery验证程序插件正确验证此表单。

I've had no luck via regular jQuery code beyond getting the form to not submit blank input values. 除了获取不提交空白输入值的表单之外，我通过常规的jQuery代码没有任何运气。 So as it is, anybody can put 'sadklfhsdk' in any of the fields (except for email, unless it has a '@') and it will validate and submit to the server. 因此，任何人都可以在任何字段中放入“ sadklfhsdk”（电子邮件除外，除非带有“ @”），然后它将进行验证并提交给服务器。

So after I going through a couple of tutorials this is what I have so far: 因此，在我完成了一些教程之后，这就是我到目前为止的内容：

The HTML: HTML：

<body>
<div id="h2Groom"><h2>Grooming Request Form</h2></div>
<form id="groom_form" method="post" action="insertPS.php">
    <div id="result"></div>
    <label for="firstName"><span>First Name:</span>
    <input type="text" name="firstName" id="firstName" placeholder="Enter Your First Name" class="required"/>
    </label> 
    <label for="lastName"><span>Last Name:</span>
    <input type="text" name="lastName" id="lastName" placeholder="Enter Your Last Name" class="required"/>
    </label>   
    <label for="email"><span>Email Address:</span>
    <span id="error"></span>
    <input type="email" name="email" id="email" placeholder="Enter a Email"/>
    </label>
    <label for="phone"><span>Phone Number:</span>
    <span id="error"></span>
    <input type="text" name="phone" id="phone" placeholder="Enter a phone number" class="required"/>

    </label>    
    <label for="address"><span>Address:</span>
    <input type="text" name="address" id="address" placeholder="Enter your address" class="required"/>
    </label>   
    <label for="city"><span>City:</span>
    <input type="text" name="city" id="city" placeholder="Enter your city" />
    </label>    
    <label for="state"><span>State:</span>
    <input type="text" name="state" id="state" placeholder="Enter your state" class="required"/>
    </label>   
    <label for="zipcode"><span>Zipcode:</span>
    <input type="text" name="zipcode" id="zipcode" placeholder="Enter your zipcode" class="required"/>
    </label>

    <label for="petType"><span>Type of Pet:</span>
    <ul>
    <li><label><input name="petType" type="radio" value="dog" id="dog">Dog</label></li>
    <li><label><input name="petType" type="radio" value="cat" id="cat">Cat</label></li>
    <li><label><input name="petType" type="radio" value="bird" id="bird">Bird</label></li>
    </ul>
    </label>

        <select id="breed" name="breed">
            <option value="0">--Please Choose Dog Breed--</option>
            <option value="AlaskanMal">Alaskan Malamute</option>
            <option value="Bichon">Bichon Frise</option>
            <option value="WelshCorgi">Corgi, Welsh</option>
            <option value="Dalmation">Dalmation</option>
            <option value="EnglishToySpan">English Toy Spaniel</option>
            <option value="FrenchBull">French Bull Dog</option>
            <option value="Greyhound">Greyhound</option>
            <option value="Papillon">Papillon</option>
            <option value="Rottweiler">Rottweiler</option>
            <option value="YorkshireTerr">Yorkshire Terrier</option>
        </select>

    <label for="neut"><span>Check box if your pet has been neutered/spayed (leave unchecked if not).</span></label>
       <ul>
       <label>
       <li><input type="checkbox" name="neut" id="neut" />Yes</li></label>
        </ul>
        <br />
        <br />
        <br />
    <label for="petname"><span>Pet Name:</span>
        <input type="text" name="petname" id="petname" placeholder="Enter your pet's name" class="required" />
    </label> 
    <label for="petBday"><span>Pet's Birthday:</span>
        <input type="date" id="petBday" name="petBday"/>
    </label>

   <span>&nbsp;</span>
  <input type="submit" id="submitBttn" value="Submit" /><input type="reset" id="resetBttn" value="Reset" />

</form>
</body>

The jQUERY (except the script to send values to server, see jsfiddle link): jQUERY（将值发送到服务器的脚本除外，请参见jsfiddle链接）：

$(document).ready(function() {
    $('input[name=petType]').click(function() {
        if(this.id=='dog') {
            $('#breed').show('slow');
        }
        else {  
            $('#breed').hide('slow');
        }
    });

    $('input[name=phone]').blur(function() {
    if (validatePhone('phone')) {
        $('#error').html('Valid');
        $('#error').css('color', 'green');
    }
    else {
        $('#error').html('Invalid');
        $('#error').css('color', 'red');
    }
});

    $('input[name=email]').blur(function() {
        if (validateEmail('email')) {
            $('#error').html('Valid');
            $('#error').css('color', 'green');
        }
        else {
            $('#error').html('Invalid');
            $('#error').css('color', 'red');
        }
    });

    $("#submitBttn").click(function() { 
        //get input field values
        var user_firstName  = $('input[name=firstName]').val();
        var user_lastName   = $('input[name=lastName]').val();  
        var user_email      = $('input[name=email]').val();
        var user_address    = $('input[name=address]').val();
        var user_phone      = $('input[name=phone]').val();
        var user_city       = $('input[name=city]').val();
        var user_state      = $('input[name=state]').val();
        var user_zipcode    = $('input[name=zipcode]').val();
        var user_petname    = $('input[name=petname]').val();
        var checked_radio = $('input:radio[name=petType]').is(':checked');
        var user_neut = $('input:checkbox[name=neut]').is(':checked'); 
        var user_breed = $('input:select[name=breed]').is(':selected');
        var txtVal = $('#petBday').val();
        if(isDate(txtVal))
                alert('Valid Date');
            else
                alert('Invalid Date');      
    var proceed = true;
//Validation functions, executed when user hits "submit"

function validatePhone(phone) {
    var a = document.getElementById(phone).value;
    var filter = /^[0-9-+]+$/;
    if (filter.text(phone)) {
        return true;
    }
    else {
        return false;
    }
}

function validateEmail(email) {
         var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
    if (filter.test(email)) {
        return true;
    }
    else {
        return false;
        }
    }
     function isDate(txtDate)
     {
        var currVal = txtDate;
        if(currVal == '')
        return false;

        //declare regex
        var rxDatePattern = /^(\d{1,2})(\/|-)(\d{1,2})(\/|-)(\d{4})$/;
        var dtArray = currVal.match(rxDatePattern); //is the format ok?

        if(dtArray ==null)
        return false;

        //checks for mm/dd/yyyy format
        dtMonth = dtArray[1];
        dtDay = dtArray[3];
        dtYear = dtArray[5];

        if(dtMonth < 1 || dtMonth > 12)
            return false;
        else if (dtDay < 1 || dtDay > 31)
            return false;
        else if ((dtMonth==4 || dtMonth==6 || dtMonth==9 || dtMonth==11) && dtDay ==31)
            return false;
            else if (dtMonth == 2)
            {
                var isleap = (dtYear % 4 == 0 && (dtYear % 100 != 0 || dtYear % 400 == 0));
                if(dtDay > 29 || (dtDay ==29 && !isleap))
                    return false;
            }
            return true;
     }

EDIT: corrected if(filter.text()) to if(filter. test (phone)) . 编辑：校正如果（filter.text（））来如（过滤器测试（电话））。 None of my java validation code works. 我的Java验证代码均无效。

Answer 1

validatePhone ：filter.text应该拼写测试

使用jQuery验证各种输入时遇到麻烦

问题描述

1 个解决方案

解决方案1
0 2014-04-30 23:22:37

使用jQuery验证各种输入时遇到麻烦

问题描述

1 个解决方案

解决方案1 0 2014-04-30 23:22:37

解决方案1
0 2014-04-30 23:22:37