Question

I have a HTML File, that looks like this:

        Input 1: <input type="text" required="false" /><br>
    Input 2: <input type="text" required="true" /> *<br>
    Input 3: <input type="text" required="false" /><br>
    Input 4: <input type="text" required="false" /><br>
    Input 5: <input type="text" required="true" /> *<br>
    Input 6: <input type="text" required="false" /><br>
    Input 7: <input type="text" required="true" /> *<br>
    <input type="button" id="subButton" value="Run" />

This is my jQuery-script:

$(document).ready(function(){
                $("#subButton").click(function(){

                    //Copy START
                    var setError = false;
                    $.each($(":input"), function(e){
                        if(($(this).attr("required") == "true") && (this.value == "")){
                            setError = true;
                        }
                    });
                    if(setError != false) alert("Not all required fields are filled");
                    //Copy END

                });
            });

If i change the attr to “type”, it works if i not fill up every box. But i want to use this with the attribute required.

Any ideas, why it doesn’t work?

Thanks for help

Answer 1

You are using required in a wrong way. If HTML, it should be this way:

<input type="text" required />

And if it is XHTML, it should be this way:

<input type="text" required="required" />

And you need to access it using jQuery using $.prop():

if($("input").prop("required")) { ... }

---

Else, you have the freedom to use data-* attributes this way:

data-reqd="yes"

And access it using:

if ($(this).data("reqd") == "yes") { ... }