asked on

UI and Validation Codes

I have using UI on getbootstrap.com
and integrate with the following form wizard
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_form_steps

Everything is working fine except the following validateform() on w3school.com.
My question is: inside of validateform(), how can I call the bootstrap basic client validation? Because all of the my input html 5 is under bootstrap, and I want to take an advantage of using it instead of re-code everything manually.

function validateForm() {
        // This function deals with validation of the form fields
        var x, y, i, valid = true;
        x = document.getElementsByClassName("tab");
        y = x[currentTab].getElementsByTagName("input");
        // A loop that checks every input field in the current tab:
        for (i = 0; i < y.length; i++) {
            // If a field is empty...
            //if (y[i].value == "") {
                // add an "invalid" class to the field:
            //    y[i].className += " invalid";
                // and set the current valid status to false
            //    valid = false;
           // }
        }
        // If the valid status is true, mark the step as finished and valid:
        if (valid) {
            document.getElementsByClassName("step")[currentTab].className += " finish";
        }
        return valid; // return the valid status
    }

Open in new window

Julian Hansen

how can I call the bootstrap basic client validation

This is done by default if I am not mistaken?

You add the novalidate to your form then use the required attributes for validating fields.

In your submit handler you call the form.checkValidity() to see if Bootstrap found any errors

See here for more

https://getbootstrap.com/docs/4.3/components/forms/#validation

Open in new window

ITsolutionWizard

ASKER

Thank you. But my webpage is form wizard. e.g. every step has 4 input boxes. when "Next" submit button is clicked, I want to validate 4 input boxes only in the particular step. Calling form.checkValidity() will fire up all of the input boxes for validation, and I do not think it is working.

Thanks

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial