HTML5 validation not working On OnChange select box form Submit

Question

HTML5 validation not working On OnChange select box form Submit .

If i have use submit button validation work , but i need onChange form submit and html% validation

<form action="do.php" method="post">
    <select id="myselect" name="myselect" onchange="this.form.submit()" required="">
        <option value="">
            select
        </option>

        <option value="1">
            One
        </option>

        <option value="2">
            Two
        </option>

        <option value="3">
            Three
        </option>

        <option value="4">
            Four
        </option>
    </select> <select id="myselect2" name="myselect2" onchange="this.form.submit()" required="">
        <option value="">
            select
        </option>

        <option value="5">
            five
        </option>

        <option value="6">
            six
        </option>

        <option value="7">
            seven
        </option>
    </select>
</form>

this was condition On change form submit with out validate other select box . please help .

score 1 · Answer 1 · answered Jul 25 '14 at 09:26

HTML5 validation applies only when the form is submitted using HTML constructs. If it is submitted with a script, no HTML5 validation takes place. Thus, you need to code your own validation in JavaScript.

Reference: HTML5 LC, 4.10.22.3 Form submission algorithm, where item 4 list the conditions for performing validation, including the requirement that the “submitted from submit() method flag” is not set.

score 0 · Answer 2 · answered Jul 25 '14 at 09:05

You may use this 'hack' http://jsfiddle.net/MGhA7/.

You specify <select required="required"> so value can not be empty, and then add <option value="" selected disabled>empty</option> so default value is empty and can not be selected again.

EDIT: a little more explanation.

This way, form can not be submitted because "selected" value is actually "" (empty), which is not allowed by "required" attribute; and when user changes selection, the default value can not be selected again because of "disabled" attribute.

HTML5 validation not working On OnChange select box form Submit

2 Answers2