check if input text field contains min val on submit

I have a pretty simple HTML web form...

I am taking the data and serializing to JSON (and will eventually send somewhere else. But, for now am using console.log for test).

When the user fills out the form, and then clicks submit; I would like to simply check the value of my input text field, and make sure the user has at-least entered a number higher then 0, but not 0.

        <div>
            <label>Age
                <input type="text" name="age">
            </label>
        </div>

I would like this validation to run before, my serialize function below it fires. Essentially, I want to check or validate this before data is sent. If the user enters 0, I don't want to send.

Below is my full JavaScript. (I still cannot get validate function as described above).

(function ($) {
    $.fn.serializeFormJSON = function () {

        var o = {};
        var a = this.serializeArray();
        $.each(a, function () {
            if (o[this.name]) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };
})(jQuery);

$('form').submit(function (e) {

        function validateForm(){ // would like to check before below fires for serialize

            var form = document.getElementById("form"), inputs = form.getElementsByTagName("input"), 

            input = null, flag = true;
            for(var i = 0, len = inputs.length; i < len; i++) {
                input = inputs[i];
                // if the value is not a valid number or it's less than or equal 0 
                if(isNaN(input.value) || +input.value < 0) { 
                    flag = false;
                    input.focus();
                        console.log("error!");
                    // break;
                 } 
            }
            return(flag);
        }

    e.preventDefault();
    var data = $(this).serializeFormJSON();
    console.log(data);

});

Answers 1

  • To accomplish that, I'm (more or less) usually do this:

    HTML

    <form action="(action url)" id="form" method="post" onsubmit="return validateForm()">
        //form contents
    </form>
    

    JS

    function validateForm() { // would like to check before below fires for serialize
        //var form = document.getElementById("form"), inputs = form.getElementsByTagName("input"),
        //If you use jQuery, it more preferred to write like this:
        var form = $('#form'), inputs = form.find('input'), input = null, flag = true;
    
        for(var i = 0, len = inputs.length; i < len; i++) {
            input = inputs[i];
            // if the value is not a valid number or it's less than or equal 0 
            if(isNaN(input.value) || +input.value < 0) {
                flag = false;
                input.focus();
                console.log("error!");
            }
            //do the break
            if (!flag) break;
        }
        if (flag) {
            var data = $(this).serializeFormJSON();
            console.log(data);
        }
        return flag;
    }
    

Related Articles