All geek questions in one place

Validate all elements in the form using Javascript

I know javascript at the entry level, but I have a problem.

I have 7 input elements on the form, and I want all of them to be filled. I came up with this idea, but it looks disgusting .

Can someone please help me check if all form elements are full or not?

function validateForm() { var x=document.forms["register"]["name"].value; var y=document.forms["register"]["phone"].value; var z=document.forms["register"]["compname"].value; var q=document.forms["register"]["mail"].value; var w=document.forms["register"]["compphone"].value; var e=document.forms["register"]["adres"].value; var r=document.forms["register"]["zip"].value; if (x==null || x=="" || y==null || y=="" || z==null || z=="" || q==null || q=="" || w==null || w=="" || e==null || e=="" || r==null || r=="") { alert("Please fill all the inputs"); return false; } } </script>
+4
source share
4 answers

This is a simple and dirty way.

It is best to update the validation message in which the fields are required.

 function validateForm() { var fields = ["name, phone", "compname", "mail", "compphone", "adres", "zip"] var i, l = fields.length; var fieldname; for (i = 0; i < l; i++) { fieldname = fields[i]; if (document.forms["register"][fieldname].value === "") { alert(fieldname + " can not be empty"); return false; } } return true; }
+9
source

With simple plain JS vanilla, you can handle this in a much more simplified way:

Javascript

 function validateForm(){ var form = document.getElementById("register"), inputs = form.getElementsByTagName("input"), input = null, flag = true; for(var i = 0, len = inputs.length; i < len; i++) { input = inputs[i]; if(!input.value) { flag = false; input.focus(); alert("Please fill all the inputs"); break; } } return(flag); }

Then make sure that the return function inside your form is inline (wrong practice):

 <form name="register" id="register" method="post" action="path/to/handler.php" onsubmit="return validateForm();">

Or in a more unobtrusive way:

 window.onload = function(){ var form = document.getElementById("register"); form.onsubmit = function(){ var inputs = form.getElementsByTagName("input"), input = null, flag = true; for(var i = 0, len = inputs.length; i < len; i++) { input = inputs[i]; if(!input.value) { flag = false; input.focus(); alert("Please fill all the inputs"); break; } } return(flag); }; };
+5
source

You could just do this:

 //Declare variables var 1, 2, 3, 4, 5, 6, 7; 1 = document.getElementById("Field Id"); 2 = document.getElementById("Field Id"); 3 = document.getElementById("Field Id"); 4 = document.getElementById("Field Id"); //Define variable values 5 = document.getElementById("Field Id"); 6 = document.getElementById("Field Id"); 7 = document.getElementById("Field Id"); //Check if any of the fields are empty If (1 == "" || 2 == "" || 3 == "" || 4 == "" || 5 == "" || 6 == "" || 7 == "") { alert("One or more fields are empty!"); //Other code }

I used this for my own form and it works great without taking up too much space or looking too ugly. It works for all elements of the field and checks the entered value.

0
source 
 <html> <head> <title> Event Program</title> <script> function validateForm() { var fields = ["name, phone", "compname", "mail", "compphone", "adres", "zip"] var i, l = fields.length; var fieldname; for(i = 0; i < l; i++) { fieldname = fields[i]; if(document.forms["register"][fieldname].value === "") { alert(fieldname + " can not be empty"); return false; } } return true; } var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"]; var fields = { "eventName": "Event Name", "eventDate": "Event Date", "eventPlace": "Event Place" } function Validate(oForm) { var arrInputs = oForm.getElementsByTagName("input"); for(var i = 0; i < arrInputs.length; i++) { var oInput = arrInputs[i]; if(oInput.type == "text" && oInput.value == "") { alert(fields[oInput.name] + " cannot be empty"); return false; } if(oInput.type == "file") { var sFileName = oInput.value; if(sFileName.length > 0) { var blnValid = false; for(var j = 0; j < _validFileExtensions.length; j++) { var sCurExtension = _validFileExtensions[j]; alert(sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase()) if(sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) { blnValid = true; break; } } if(!blnValid) { alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", ")); return false; } } } } return true; } </script> </head> <body> <div align="center"> <h3>Event Management</h3> <form onsubmit="return Validate(this);" id='eventForm' name='eventForm' method='POST' enctype='multipart/form-data' action='saveEvent.php'> <table> <tr> <td>Event Name</td> <td> <input type="text" name="eventName"> </td> </tr> <tr> <td>Event Date</td> <td> <input type="text" name="eventDate" id='datepicker'> </td> </tr> <tr> <td>Event place</td> <td> <input type="text" name="eventPlace"> </td> </tr> <tr> <td>Upload Image</td> <td> <input type="file" name="my file" /> <br /> </td> </tr> <tr> <td>About Events</td> <td> <textarea></textarea> </td> </tr> <tr> <td colspan=2 align=center> <input type="submit" value="Submit" /> <input type="button" name="clear" value="Clear" /> </td> </tr> </table> </form> </div> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script> $(function () { $("#datepicker").datepicker({ dateFormat: "dd/mm/yy", changeMonth: true, changeYear: true }).datepicker("setDate", new Date()); }); </script> </body> </html>
0
source

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

More articles:


All Articles