Javascript: Problems with invoking functions within a function

Question

I am trying to clean up this spaghettified code and I decided to separate the methods into separate functional objects and then call them within a single validate function. The code runs correctly on the first function and returns an alert box correctly. However, when I fix the first alert and resubmit the form the second function fires an alert at me to fix something, I click okay and immediately get an alert on the third function. Obviously I need to put in some code to stop the program from running after I click okay to the second functions alert so I can fix the issue, but how?

var checkboxes = document.getElementsByName('days');
var valid      = false;

function textFieldValid(){
    var textFieldsReq = document.getElementsByName('textFieldReq');
    for( var i=0;i<9;i++ ){
        if ( !textFieldsReq[i].value ){
            alert ( 'You need to fill in the required* text field!' );
            textFieldsReq[i].focus();
            return false;
        }
    }
};


function checkboxesValid(){
    for ( var i = 0;i<checkboxes.length;i++ ){
        if ( checkboxes[i].checked ) {
        valid = true;
        break;
        }
    }
    if ( !valid ) {
        alert( 'You need to select at least one day!' );
        checkboxes[0].focus();
        return false;
    }
}

function lodgeValid(){
    var lodging = document.getElementsByName('lodge');
    for( var i=0; i<lodging.length; i++ ){
        if( lodging[i].checked ){
            valid=true;
            break;
        }
    }
    if ( !valid ) {
        alert( 'You need to select at least one option!' );
        lodging[0].focus();
        return false;
    }
}


function validate(textFieldsReq){
    textFieldValid();
    checkboxesValid();
    lodgeValid();    
};

don't use all three together in validate method use that within single method and call them separately by true and false — cracker
– cracker, Commented Jun 3, 2015 at 4:11

cracker · Accepted Answer · 2015-06-03 04:12:40Z

2

You need to return true/false from each of the tests and then

var checkboxes = document.getElementsByName('days');

function textFieldValid() {
    var textFieldsReq = document.getElementsByName('textFieldReq');
    for (var i = 0; i < 9; i++) {
        if (!textFieldsReq[i].value) {
            alert('You need to fill in the required* text field!');
            textFieldsReq[i].focus();
            return false;
        }
    }
    //if valid return true
    return true;
};


function checkboxesValid() {
    //create local variables
    var valid = false;
    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].checked) {
            valid = true;
            break;
        }
    }
    if (!valid) {
        alert('You need to select at least one day!');
        checkboxes[0].focus();
        return false;
    }
    //if valid return true
    return valid;
}

function lodgeValid() {
    var lodging = document.getElementsByName('lodge'),
        valid = false;
    for (var i = 0; i < lodging.length; i++) {
        if (lodging[i].checked) {
            valid = true;
            break;
        }
    }
    if (!valid) {
        alert('You need to select at least one option!');
        lodging[0].focus();
        return false;
    }
    //if valid return true
    return valid;
}


function validate(textFieldsReq) {
    //check whether all the tests are turnig true
    return textFieldValid() && checkboxesValid() && lodgeValid();
};

edited Jun 3, 2015 at 4:12

cracker

4,9043 gold badges26 silver badges41 bronze badges

answered Jun 3, 2015 at 4:11

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

3 Comments

user2654953 Over a year ago

I made the suggested changes and it fixed part of the issue. Now, when I submit the form the first alert fires, I click okay and fix the offending issue (Good). Then I create the second issue and I get the second alert, fix it, then press okay - but then the form is sent to my form mailer script skipping the lodgeValid() function. You can see the code github.com/st2641/web_forms.git /ReunionRe2015/public_html/js/reg_inputs.js

Arun P Johny Over a year ago

@user2654953 so do you want to get all the 3 alerts at once

user2654953 Over a year ago

No, I always want to get a single alert in error[0]. Once it is cleared, if there is another error[0] it goes to that one, regardless of the function. There are three sections: textfields/checkboxes/radio buttons. The functions are lined up in the order that they appear in the html form.

Collectives™ on Stack Overflow

Javascript: Problems with invoking functions within a function

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related