basic javascript form validation - validate same input types with same function

Question

I have always used jQuery validate() for forms, but have run into a problem recently after an upgrade to our XMPie software (we do targeted communications).

The new version of XMPie requires jQuery 1.10.2 which is a version not supported by validate(), so I'm doing the validation manually.

I can easily validate by writing a separate function for each input, but it means re-writing at least some of the code to target a specific input name or id for example.

What I'm wondering is why can't I write a generic function for a specific input type (for example a simple text field) and let the input call the function on focusout(), passing itself as a parameter?

If I've got two text inputs, "fullName" and "userName" why can't I use

$(document).ready(function () {
    var inputName = "";
    var inputValue = "";
    var inputAlert = "";
    $("input").focusout(function () {
        inputIdentify(this);
        console.log(inputName);
        inputGetValue(this);
        console.log(inputValue);
        if (this.type == "text") {
            console.log("YES");
            textValidate(inputName, inputValue);
        }
    });

    function inputIdentify(theInput) {
        inputName = theInput["name"];
        console.log(inputName);
        return inputName;
    }

    function inputGetValue(theInput) {
        inputValue = theInput["value"];
        return inputValue;
    }

    function textValidate(theInput, inputValue) {
        console.log(theInput,inputValue);
        var letters = /^[A-Za-z ]+$/;
        if (inputValue.match(letters)) {
            $(theInput).addClass("correct");
            return true;
        } else {
            $(theInput).removeClass("correct");
            $(theInput).addClass("incorrect");

            // alert('Username must have alphabet characters only');
            $(inputName).focus();
            return false;
        }
    }
});

to remove and add simple css classes (coloured border) to indicate the problem fields?

Thanks and regards,

Malcolm

Thanks for looking - yes the "correct" and "incorrect" classes are not being applied to the input field. — Malcolm Whild
– Malcolm Whild, Commented Feb 1, 2018 at 0:09
Can you add the HTML and CSS and make this an executable stack snippet that demonstrates the problem? — Barmar
– Barmar, Commented Feb 1, 2018 at 0:15

Barmar · Accepted Answer · 2018-02-01 01:34:51Z

1

You're not passing the correct arguments to textValidate(). You're passing inputName as the theInput, but textValidate() uses $(theInput) to access the input element. You should pass this as that argument:

textValidate(this, inputValue);

Also, your use of global variables is poor design. Since inputIdentify() and inputGetValue() return values, you should assign the returned value to local variables, instead of having those functions set global variables.

   $("input").focusout(function () {
        var inputName = inputIdentify(this);
        console.log(inputName);
        var inputValue = inputGetValue(this);
        console.log(inputValue);
        if (this.type == "text") {
            console.log("YES");
            textValidate(this, inputValue);
        }
    });

    function inputIdentify(theInput) {
        var inputName = theInput["name"];
        console.log(inputName);
        return inputName;
    }

    function inputGetValue(theInput) {
        var inputValue = theInput["value"];
        return inputValue;
    }

edited Feb 1, 2018 at 1:34

answered Feb 1, 2018 at 0:19

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Malcolm Whild Over a year ago

Thanks for taking the time to look at this. I know it's pretty basic stuff.

Malcolm Whild Over a year ago

Thanks for taking the time to look at this. I know it's pretty basic stuff. You're right about using this as an argument for textValidate() - that was dumb. And you're right about the global variables - except for inputValue. When I remove that one, and console.log(inputValue) right after the call to inputGetValue(), the variable is blank.

Barmar Over a year ago

Sounds like you didn't assign to the variable when you called it. I've updated the answer to show what I mean.

Malcolm Whild Over a year ago

Thank you Barmar - that is great and just what I need. Now that I see it, declaring the variable as part of the function call is so obvious. I'm just learning ...

Collectives™ on Stack Overflow

basic javascript form validation - validate same input types with same function

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related