[RESOLVED] [JavaScript] Validate Values

[dday9]

I'm wanting to validated that all my required inputs have values in them. My thinking is that JavaScript is a functional language, so there must be something like this:

Pseudo code:

(From ele As Element In ParentElement Where ele.Required && (ele.Value == "" | ele.Value == null)).length == 0

[tr333]

Do you need to validate in JavaScript, or are you just wanting to validate on form submission? You should consider using the Constraint Validation API in HTML5, in combination with specific input types instead of just using "text" inputs everywhere. This allows you to just add standard attributes to your form elements for automatic validation by the browser.

https://www.wufoo.com/html5/
http://diveinto.html5doctor.com/forms.html

https://jsfiddle.net/wq431w96/

https://developer.mozilla.org/en-US/...int_validation
http://html5please.com/#form%20validation
http://caniuse.com/#feat=form-validation
https://developer.mozilla.org/en-US/...orm_validation

[dday9]

I should expand a little bit, there are multiple forms and all of which have some elements that have the required attribute. I'm actually using my accordion control that I have a codebank submission and in each div element I have a form. On the last div I have the submit button and I'm needing to validate that all elements that are required have something in it.

[szlamany]

Why not simply "remove" a "got my REQUIRED value" CSS class from the INPUT when it is filled.

Then when you go to SUBMIT just do a

$("#someParentDiv").find(".still-waiting-for-required").length != 0

[edit] this is assuming you have jQuery setup on the page [/edit]

[edit2] you must be if you are using the ACCORDION [/edit2]

[szlamany]

And if you wanted to color them all red

if ($("#someParentDiv").find(".still-waiting-for-required").length != 0) {
    $("#someParentDiv").find(".still-waiting-for-required").addClass("color-me-red");
    $("#someDialog").dialog("open")........ 
              // in the CLOSE event of the DIALOG do a .removeClass("color-me-red")
}

If you use jQuery like the above you should cache the "repeated" use of the same "selectors" as there is overhead in those calls that you should avoid repeat calling...

[dday9]

What I wound up doing is adding a class name for each required element in each tab and then in the submit button's click event looping through each required element checking if one of the values is empty or null, if one is empty or null then I alerted the user and used the return keyword to exit the function prematurely.