mardi 26 mars 2019

How to call multiple functions with DOM and Javascript

I'm working on an assignment and need to validate multiple inputs. I have created multiple functions and am having trouble calling each one. The first one is the only one that will call. The other two will just hang and do nothing.

If I do a single function call for oninput at the form tag it works. Just that it automatically calls the function and all validations. This causes all the prompts to come out at the same time which I don't want. This is why the oninput call is being done at the input tag.

HTML:

    <div id="nameValidate"></div>
    <label for="name">Name:</label>
    <input type="text" id="nameID" 
        oninput="nameValidation()"/> <br />

    <div id="emailValidate"></div>
    <label for="email">Email:</label>
    <input type="text" id="emailID" 
        oninput="emailValidation()"/> <br />

    <div id="phoneValidate"></div>
    <label for="phone">Phone Number:</label>
    <input type="number" id="phoneID" 
        oninput="phoneValidation()"/>

Javascript

    function nameValidation() {
        var name = document.getElementById("nameID").value;

        if (name.length < 3) {
            document.getElementById("nameValidate").innerText = "Please 
                enter your full name.";
        }
        else if (name.length > 3) {
            document.getElementById("nameValidate").innerText = "";
        }
    }

    function emailValidation() {
        var email = document.getElementById("emailID").value;

        if (!email.match(".com") && email < 5) {
            document.getElementById("emailValidate").innerText = "Please 
                enter your full email address.";
        }
        else {
            document.getElementById("emailValidate").innerText = "";
        }
    }

    function phonevalidation() {
        var phone = document.getelementbyid("phoneID").value;

        if (phone == "" || phone.length < 10) {
            document.getelementbyid("phonevalidate").innertext = "please 
                enter your full phone number.";
        }
        else if () {
            document.getelementbyid("phonevalidate").innertext = "";
        }
    }

Aucun commentaire:

Enregistrer un commentaire