简体   繁体   中英

JavaScript - Validate User Input

I have a web page that is supposed to take in a user's contact information and validate it, however my script doesn't seem to be functioning and I'm not sure why.

I know that you can get the input of a text field by using document.getElementById(name).value which is what I have, but my submit button doesn't respond with anything.

Any suggestions?

HTML:

<form>
    First Name:<br>
        <input type="text" id="first" name="firstname"><br>
    Last Name:<br>
        <input type="text" id="last" name="lastname"><br>
    Street Address:<br>
        <input type="text" id="addr" name="address"><br>
    City:<br>
        <input type="text" id="city" name="city"><br>
    State:<br>
        <input type="text" id="state" name="state"><br>
    Zip Code:<br>
        <input type="text" id="zip" name="zip"><br>
    Phone #:<br>
        <input type="text" id="phone" name="phone"><br>
    E-mail Address:<br>
        <input type="text" id="email" name="email"><br>
    <br>
    <button type="button" onclick="verify()">Submit</button>
</form>

JavaScript:

function verify() {
    var fname, lname, addr, city, state, zip, phone, email;
    var alpha = /[A-z]/i;

    fname = document.getElementById('first').value;
    lname = document.getElementById('last').value;
    addr = documnet.getElementById('addr').value;
    city = document.getElementById('city').value;
    state = document.getElementById('state').value;
    zip = document.getElementById('zip').value;
    phone = document.getElementById('phone').value;
    email = document.getElementById('email').value;

    var values = [fname, lname, addr, city, state, zip, phone, email];

    window.alert(fname);

    /*
    //Check to see if any fields are blank
    for(var i = 0; i < values.length; i++) {
        if(values[i] == "") {
            window.alert("Must have a value in each field");
            return false;
        }
    }

    //Check to see if text fields contain non-alphabetic characters
    if(!alpha.test(fname)) {
        window.alert("First name must contain only alphabetic characters");
        return false;
    }
    if(!alpha.test(lname)) {
        window.alert("Last name must contain only alphabetic characters");
        return false;
    }
    if(!alpha.test(city)) {
        window.alert("City must contain only alphabetic characters");
        return false;
    }
    if(!alpha.test(state)) {
        window.alert("State must contain only alphabetic characters");
        return false;
    }
    */
}

You have a typo in

addr = documnet.getElementById('addr').value;

it should be

addr = document.getElementById('addr').value;

notice the spelling of document

Other than that, your code seems to be working fine..see the fiddle

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM