проблема с проверкой различных входных данных с помощью jQuery

Question

проблема с проверкой различных входных данных с помощью jQuery

0

для проекта класса я должен создать веб-сайт для зоомагазина, в котором есть служба ухода за домашним животным. Это связано с формой, php и сервером mysql на моем localhost. Я не смог правильно проверить эту форму с помощью плагина проверки подлинности jQuery по какой-то неизвестной мне причине.

Мне не повезло с помощью обычного кода jQuery, за исключением того, что форма не передавала пустые значения ввода. Так или иначе, любой может поместить "sadklfhsdk" в любое из полей (кроме электронной почты, если у него нет "@"), и он будет проверять и отправлять на сервер.

Поэтому, пройдя пару учебных пособий, это то, что у меня есть до сих пор:

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 name" class="required" />
    </label> 
    <label for="petBday"><span>Pet 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>

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: исправлено if (filter.text()), если (filter. Test (phone)). Ни один мой код проверки Java не работает.

user2014 01 май 2014, в 02:03

Источник

Теги:

javascript

jquery

validation