JavaScript form is empty and cannot be submitted

With the development of the Internet, web forms have become an important method of network communication. They are not only used for website login, registration, message and other functions, but are also widely used in various online transactions, surveys and feedback. . In order to ensure the accuracy and completeness of the data, it is particularly important to verify the legality of the form. This article mainly explains how to use JavaScript to implement the function that the form cannot be submitted if it is empty.

1. Background that the form is empty and cannot be submitted

Form data is a key data carrier for communication between the website and users. The correctness and legality of its data are directly related to the website's security and the proper functioning of the business. Therefore, form verification is one of the most basic security requirements in website development. Form verification can basically be divided into two methods: server-side verification and client-side verification.

Server-side form verification is generally performed before submitting the form data to the background script (such as PHP, ASP, JSP, etc.). This method can generally detect the legality and security of the data, but it requires Making an additional network request for the transmitted data will cause certain performance overhead and user experience degradation.

Client-side verification generally uses JavaScript scripts to perform form verification on the client. Users can perform verification before submitting the form, avoiding the overhead of multiple network requests and improving user experience. However, there are certain risks in client-side verification, because users can disable JavaScript scripts, resulting in invalid verification, so it is only used as a basic auxiliary verification method.

In client-side verification, a common requirement is that if there is a null value in the form, it cannot be submitted successfully. This can effectively prevent users from submitting incomplete data or misoperations resulting in erroneous data. The specific implementation method is introduced below.

2. The implementation process of the form that cannot be submitted if it is empty

When implementing the function that the form cannot be submitted if it is empty, you need to first understand some form attributes and methods in JavaScript scripts, which are introduced below. one time.

1. Form properties

There are some important properties in the form. These properties can be used in JavaScript, mainly including the following:

(1 ) form.elements: Array of form elements, you can get references to all elements of the form.

(2) form.length: The number of form elements. The number of elements is more important in the verification form.

(3) form.action: form submission address.

(4) form.method: form submission method, currently there are two main methods: GET and POST.

2. Form methods

Form methods are generally functions in JavaScript scripts that operate on forms, including the following:

(1)submit( ): Submit the form

(2) reset(): Reset the form

(3) resetForm(): Reset the form

(4) checkValidity(): Check Legality of the form

(5) reportValidity(): Display verification results

3. Form element attributes and methods

Mainly form element attributes and methods It is used through references to form elements, including the following:

(1) element.value: the value of the element

(2) element.type: the type of the element

(3) element.checked: The checked state of the radio button or check box

(4) element.defaultValue: The default value of the element

(5) element.focus() : The element gains focus

(6) element.blur() : The element loses focus

To implement the function that the form cannot be submitted if it is empty, you can follow the following steps in JavaScript.

1. Get form elements

First you need to get the form elements that need to be verified, use form.elements.length and form.elements[i] to get the number and correspondence of form elements form element reference.

2. Judge form elements

Traverse the form elements and determine whether the value of each element is empty. If there is a null value, cancel the submission operation, otherwise continue the submission operation. .

The code is as follows:

function checkForm(form) {
    for (var i = 0; i < form.elements.length; i++) {
        var element = form.elements[i];
        if (element.value == "") {
            alert(element.name + "不能为空！");
            element.focus();
            return false;
        }
    }
    return true;
}

In this example, use a for loop to traverse all elements in the form, determine whether the value of each form element is empty, and if it is empty, a prompt box will pop up, and Returns a false value, indicating that the form cannot be submitted. If there is no null value, it returns true, that is, the form can be submitted. At the same time, the element.focus() method is called to make the user's focus immediately stay on the input box, making it easier for the user to correct errors.

Finally, register the onsubmit event for the form and call the checkForm() function.

<form id="myForm" action="submit.php" method="post" onsubmit="return checkForm(this);">
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="submit" value="提交">
</form>

3. Summary

JavaScript is a very important scripting language in web development. By using JavaScript, rich functions such as form validation, style attachment, and DOM operations can be realized.

This article introduces in detail how to use JavaScript to implement the function that the form cannot be submitted if it is empty. It mainly includes the steps of obtaining form elements, traversing the form elements and judging whether they are empty, registering the onsubmit event for the form, etc. I hope it will be helpful to web developers. Helps. At the same time, it should be noted that when using JavaScript to verify the form, factors such as security and user experience need to be carefully considered to ensure the integrity and legality of the data.

The above is the detailed content of JavaScript form is empty and cannot be submitted. For more information, please follow other related articles on the PHP Chinese website!