A JavaScript example for detecting form data
A JavaScript example for detecting form data. It is very simple and practical. Interested friends can take a look at
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>每天一个JavaScript实例-检测表单数据</title>
<style>
[role="alert"]{
background-color: #fcc;
font-weight: bold;
padding:5px;
border:1px dashed #000;
}
div{
margin:10px 0;
padding:5px;
width:400px;
background-color: #fff;
}
</style>
<script>
window.onload = function(){
document.getElementById("thirdfield").onchange = validateField;
document.getElementById("firstfield").onblur = mandatoryField;
document.getElementById("testform").onsubmit = finalCheck;
}
function validateField(){
removeAlert();
if(!isNaN(parseFloat(this.value))){
resetField(this);
}else{
badField(this);
generateAlert("You entered an invalid value in Third Field. only numeric values such as 105 or 3.45 are allowed");
}
}
function removeAlert(){
var msg = document.getElementById("msg");
if(msg){
document.body.removeChild(msg);
}
}
function resetField(elem){
elem.parentNode.setAttribute("style","background-color:#fff");
var valid = elem.getAttribute("aria-invalid");
if(valid) elem.removeAttribute("aria-invalid");
}
function badField(elem){
elem.parentNode.setAttribute("style","background-color#fee");
elem.setAttribute("aria-invalid","true");
}
function generateAlert(txt){
var txtNd = document.createTextNode(txt);
msg = document.createElement("div");
msg.setAttribute("role","alert");
msg.setAttribute("id","msg");
msg.setAttribute("class","alert");
msg.appendChild(txtNd);
document.body.appendChild(msg);
}
function mandatoryField(){
removeAlert();
if(this.value.length > 0 ){
resetField(this);
}else{
badField(this);
generateAlert("You must enter a value into First Field");
}
}
function finalCheck(){
//console.log("aaa");
removeAlert();
var fields =document.querySelectorAll('input[aria-invalid="true"]');
//var fields =document.querySelectorAll("input[aria-invalid='true']");//错误！！！
console.log(fields);
if(fields.length > 0){
generateAlert("You have incorrect fields entries that must be fixed before you can submit this form");
return false;
}
}
</script>
</head>
<body>
<form id = "testform">
<div>
<label for="firstfield">*first Field:</label><br />
<input id="firstfield" name = "firstfield" type = "text" aria-required = "true" />
</div>
<div>
<label for="secondfield">Second Field:</label><br />
<input id="secondfield" name = "secondfield" type = "text" />
</div>
<div>
<label for="thirdfield">Third Field(numeric):</label><br />
<input id="thirdfield" name = "thirdfield" type = "text" />
</div>
<div>
<label for="fourthfield">Fourth Field:</label><br />
<input id="fourthfield" name = "fourthfield" type = "text" />
</div>
<input type="submit" value = "Send Data" />
</form>
</body>
</html>For more related articles about a JavaScript example for detecting form data, please pay attention to the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to implement page jump after PHP form submission
Aug 12, 2023 am 11:30 AM
How to implement page jump after PHP form submission [Introduction] In web development, form submission is a common functional requirement. After the user fills out the form and clicks the submit button, the form data usually needs to be sent to the server for processing, and the user is redirected to another page after processing. This article will introduce how to use PHP to implement page jump after form submission. [Step 1: HTML Form] First, we need to write a page containing a form in an HTML page so that users can fill in the data that needs to be submitted.
How to handle user rights management in PHP forms
Aug 10, 2023 pm 01:06 PM
How to handle user rights management in PHP forms With the continuous development of web applications, user rights management is one of the important functions. User rights management can control users' operating rights in applications and ensure the security and legality of data. In PHP forms, user rights management can be implemented through some simple code. This article will introduce how to handle user rights management in PHP forms and give corresponding code examples. 1. Definition and management of user roles First of all, defining and managing user roles is a matter of user rights.
How to use JavaScript to implement real-time verification of the input box content of a form?
Oct 18, 2023 am 08:47 AM
How to use JavaScript to implement real-time verification of the input box content of a form? In many web applications, forms are the most common way of interaction between users and the system. However, the content entered by the user often needs to be validated to ensure the accuracy and completeness of the data. In this article, we will learn how to use JavaScript to implement real-time verification of the content of the form's input box and provide specific code examples. Creating the form First we need to create a simple table in HTML
How to use JavaScript to realize the automatic prompt function of the input box content of the form?
Oct 20, 2023 pm 04:01 PM
How to use JavaScript to realize the automatic prompt function of the input box content of the form? Introduction: The automatic prompt function of the form input box content is very common in web applications. It can help users quickly enter the correct content. This article will introduce how to use JavaScript to achieve this function and provide specific code examples. Create the HTML structure First, we need to create an HTML structure that contains the input box and the auto-suggestion list. You can use the following code: <!DOCTYP
How to use HTML, CSS and jQuery to realize the advanced function of automatic saving of forms
Oct 28, 2023 am 08:20 AM
How to use HTML, CSS and jQuery to implement the advanced function of automatic saving of forms. Forms are one of the most common elements in modern web applications. When users enter form data, how to implement the automatic saving function can not only improve the user experience, but also ensure data security. This article will introduce how to use HTML, CSS and jQuery to implement the automatic saving function of the form, and attach specific code examples. 1. Structure of HTML form. Let’s first create a simple HTML form.
PHP form processing: form data query and filtering
Aug 07, 2023 pm 06:17 PM
PHP form processing: form data query and filtering Introduction In Web development, forms are an important way of interaction. Users can submit data to the server through forms for further processing. This article will introduce how to use PHP to process the query and filter functions of form data. Form design and submission First, we need to design a form that includes query and filter functions. Common form elements include input boxes, drop-down lists, radio buttons, check boxes, etc., which can be designed according to specific needs. When the user submits the form, the data will be sent to POS
Tips for using Laravel form classes: ways to improve efficiency
Mar 11, 2024 pm 12:51 PM
Forms are an integral part of writing a website or application. Laravel, as a popular PHP framework, provides rich and powerful form classes, making form processing easier and more efficient. This article will introduce some tips on using Laravel form classes to help you improve development efficiency. The following explains in detail through specific code examples. Creating a form To create a form in Laravel, you first need to write the corresponding HTML form in the view. When working with forms, you can use Laravel
How to create a form with a floating prompt using HTML, CSS and jQuery
Oct 25, 2023 am 10:48 AM
How to create a form with floating prompts using HTML, CSS and jQuery In modern web design, forms are one of the indispensable components. In order to improve user experience, we often need to add some floating prompts to the form to guide users to fill in the form correctly. This article will introduce how to use HTML, CSS and jQuery to create a form with floating prompts, and provide specific code examples. First, we need to create the HTML form. In the form we need to add some input fields, and
