All geek questions in one place

Javascript onchange event preventing onsubmit event in HTML form?

Consider the HTML form:

<form action="" method="POST" onsubmit="return checkValidArray()">
    <input type="text" name="data" onchange="return validate(this);">
</form>

It appears (both in IE 6 and Firefox 3) when you enter text in the input field and click submit that the onchange event is fired for the input field, but the onsubmit event is not fired for the form until the submit button is clicked a second time (at the same time, Of course, it does not work). In other words, onchange seems to prevent onsubmit from firing.

The desire to check each field in the form when the user leaves the field, to provide them with immediate feedback from the check, and also to prevent the submission of the form if there is invalid data.

[EDIT: Note that both validation functions contain a warning ().]

How to get around this problem?

+3
source share
5 answers

Solution (kind):

It turns out that only the presence of a warning () - or confirmation () - during the input of an exchange event, which causes the onsubmit event of the form to fail. It seems that the JS thread is blocked by warning ().
The workaround is to not include warnings () or acknowledgments () in the input exchange call.

Browsers that are known to have suffered:
IE6 - Windows
IE8 - Win
FF3 - Win

Browsers that are not known to be affected:
Google Chrome - Win
Safari - Mac
FF - Mac

+3
source

Firefox 3 (Mac) :

    <html>
        <head>
            <script>
                function validate(ele)
                {
                    alert("vali");
                    return false;
                }

                function checkValidArray()
                {
                    alert("checkValidArray");
                }

            </script>
        </head>
        <body>
            <form action="" method="POST" onsubmit="return checkValidArray()">
                <input type="text" name="data" onchange="return validate(this);">
                <input type="submit" value="Ok">
            </form>
        </body>
</html>

, . "", "Vali" "Check Valid Array". , return false , , ​​( , checkValidArray() ).

, checkValidArray() validate()? - ? ?

EDIT: IE8 FF3 , . . , onblur - , onchange? ? ( FF, Safari Mac)

+2

onblur onchange.

+1

, Mac , , . , - ...

Nivas, , onchange ( "Vali" ).

: - validate(). ( "vali" ); ! ( return from validate() , .)

EDIT: Google Chrome Windows, . - , Chrome JS.

- (), , onsubmit . ?

0

Do not create; send button. Instead, create a regular button and write a function that can be called on. Using this button.

The function will perform a check in the fields of the form, and if everything is in order, it will send the form. Otherwise it will not be.

function validate
{
  "Piece of code to Validate your form"
  document.formName.action.value = "URL which you want to call"
 document.propFile.submit(); // It will submit he page
}
0
source

Source: https://habr.com/ru/post/1702389/

More articles:


All Articles