Form onsubmit event and JavaScript return

Today, I am doing a form submission and verification. When I want to submit a form, I first verify whether I have filled in the name. If not, a prompt message is displayed on the right, and cancel the submission. If you have filled in, the submission is normal.

Preliminary thought: I want to write a js function by myself, use the onclick event at the submit button, and submit the form with js if I have filled out the result. If I have not filled in the content, a prompt message is displayed, however, after almost half a day of implementation, I could not reach the desired result, and finally found that the onsubmit attribute was originally found. It was written in the form tag.

Differences between onclick and onsubmit:

• OnSubmit is used on a form (or only a form). It is triggered before the form is submitted.
• OnClick is used by buttons and other controls to trigger click events.

When used for data verification, you can choose to verify in onclick on the submit button, you can verify in onsubmit. However, in terms of event trigger sequence, onclick is earlier. The order is:

Click the button-> onclick-> If onclick returns valid or unprocessed onclick, submit the form-> onsubmit-> If onsubmit is not processed or returns true, submit the statement; otherwise, cancel the submission.

If 'false' is returned in onsubmit, the form submission will be canceled. If 'false' is returned in onclick, the click operation will be regarded as invalid, and the form submission will not be caused.

<a href="somewhere.html" onClick="doSomething()">

In the preceding example, doSomething () is executed first, and then the browser opens the Link (default action ).

The event handler can return a Boolean value (true or false). false means "do not perform the default action ".

<a href="somewhere.html" onClick="doSomething(); return false">

This link will not be followed. After this function is executed, the program returns false, telling the browser not to perform the default action.

Sometimes it is necessary for a function to decide when to execute the default action. So we can change the example:

<a href="somewhere.html" onClick="return doSomething()">function doSomething(){    return confirm('Do you really want to follow this link?')}

This is (very simple) user interaction. The user will be asked a question. If the answer is positive, the function returns true. If the answer is canceled for a long time, the system returns false. The returned value is captured by the event handler and then transferred to the event itself. If it is flase, the default action will not be executed-the link will not enter.

However, not all default actions can be blocked. For example, the unload event will not work. Assume that the unload event is triggered when you close the browser window. If you can stop closing the window, will the window always open against the user's will? Use Microsoft's beforeunload attribute to block unload.

Return false to block the default action. All browsers support this action, which is a basic component of the event handler. Today's event handler model also adds some new methods to prevent default actions:

• W3C adds the preventDefalut () method to the event. If you reference this method, the default action will be blocked.
• Microsoft added the returnValue attribute to the event. If you set its value to false, the default action will also be blocked.

But none of them are needed. Simply returning false is enough.