Question

I am validating form. It correctly validates all the field but when I enter correct data in text fields then still it does not process the data and return everything wrong whereas I want to it to return everything correct

Here is my js code

var url, container, form,
    View = {
        init: function () {
            container     = $('.container');
            $(document).on('submit', '#form', View.findView);
        },

        loadViews: function (view, flag, e) {
            e.preventDefault();
            var search = $('.search');

            if( flag ) {
                if ( View.validation.emptyFieldsValidation() == true ) {
                    console.log('everything correct');
                } else {
                    console.log('everything incorrect');
                }
            }
            return false;
        },

        validation: {
            emptyFieldsValidation: function () {
                var inputs, field;

                $('#form input').each(function (i, el) {
                    inputs = $(this);
                    if ( inputs.val() == '' ) {
                        inputs.css('border', '1px solid red');
                        return false;
                    } else {
                        inputs.css('border', '1px solid #ccc');
                        if (inputs.hasClass('from')) {
                            console.log('from');
                            if (View.validation.validateAddress(inputs.val())) {
                                console.log('from correct address');
                                return true;
                            }
                            else {
                                inputs.css('border', '1px solid red');
                                console.log('from incorrect address');
                                //return false;
                            }
                        }
                        if (inputs.hasClass('to')) {
                            console.log('to');
                            if (View.validation.validateAddress(inputs.val())) {
                                console.log('to correct address');
                                //return true;
                            }
                            else {
                                inputs.css('border', '1px solid red');
                                console.log('to incorrect address');
                                //return false;
                            }
                        }
                        if (inputs.hasClass('time')) {
                            if (View.validation.validateForNumber(inputs.val())) {
                                console.log('time correct');
                                //return true;
                            }
                            else {
                                inputs.css('border', '1px solid red');
                                console.log('time incorrect');
                                //return false;
                            }
                        }
                    }
                });
                return false;
            },

            validateAddress: function (val) {
                var streetregex = /^[\w+\s]+\d+,\s*[\s\w]+$/;
                if (streetregex.test(val)) return true;
                else return false;
            },

            validateForNumber: function (val) {
                if (!isNaN(val)) return true;
                else return false;
            }
        }
    };

View.init();

​
here is my html code

<section class="search">
<form id="form" action="">
    <section>
        <input type="text" name="from" class="from address" id="addressone" placeholder="From">
    </section>
    <section>
        <input type="text" name="to" class="to address" id="addresstwo" placeholder="To">
    </section>
    <section>
        <label>Time</label>
        <input type="text" name="hrs" placeholder="Hours" class="t1 time">
        <span>:</span>
        <input type="text" name="mins" placeholder="Mins" class="t1 time">
        <button class="button">Search</button>
    </section>
</form>
</section>

Update

I am getting this output in my console

Answer 1

You seem to miss the fact that your emptyFieldsValidation function will always return false, as all the other return statements in its body are actually parts of ‘iterator’ function. Speaking of the latter, note that return false in $.each callback will stop the iteration.

One possible way out of it is replacing all these return false statements in the iterator function with filling the array of validation errors instead. Then (after $.each line) you could check for its length (or just do return !!errors.length). For example:

emptyFieldsValidation: function () {
  var errors = [];
  ...
  $('#form input').each(function() {
    if (! someValidationCheck) { 
      errors.push(someValidationAttribute);  
    }
  });
  ...
  return !!errors.length;