Javascript Validation for all field with required attribute

Question

I searched high and low for an answer to this question, but cannot find it anywhere.

I have a form that has the “required” attributes for HTML, and it does a great job of highlighting the fields that need to be filled in before the view ... or will do, but the system into which my form is bolted (from which I I don’t control) sends the form in any case in a few seconds. He relies on Javascript to present it. Therefore, I would like to write a Javascript script to check all the fields for the required attribute. I currently have a script that indicates the fields that I want to be required, but if it could look for an attribute, it would be brilliant.

Answer 1

If input [type = submit] is used , you don’t need JavaScript

<form id="theForm" method="post" acion=""> <input type="firstname" value="" required /> <input type="lastname" value="" required /> <input type="submit" name="submit" value="Submit" /> </form> 

JsBin work

But if input [type = button] is used to submit the form, use the snippet below

 <form id="theForm" method="post" acion=""> <input type="firstname" value="" required /> <input type="lastname" value="" required /> <input type="button" name="button" value="Submit" /> </form> window.onload = function () { var form = document.getElementById('theForm'); form.button.onclick = function (){ for(var i=0; i < form.elements.length; i++){ if(form.elements[i].value === '' && form.elements[i].hasAttribute('required')){ alert('There are some required fields!'); return false; } } form.submit(); }; }; 

Wotking jsbin

Answer 2

this will check all form field types

 $('#submitbutton').click(function (e) { e.preventDefault(); var form = document.getElementById("myForm"); var inputs = form.getElementsByTagName("input"), input = null, select = null, not_pass = false; var selects = form.getElementsByTagName("select"); for(var i = 0, len = inputs.length; i < len; i++) { input = inputs[i]; if(input.type == "hidden") { continue; } if(input.type == "radio" && !input.checked) { not_pass = true; } if(input.type == "radio" && input.checked){ not_pass = false; break; } if(input.type == "text" && !input.value) { not_pass = true; } if(input.type == "text" && input.value){ not_pass = false; break; } if(input.type == "number" && !input.value) { not_pass = true; } if(input.type == "number" && input.value){ not_pass = false; break; } if(input.type == "email" && !input.value) { not_pass = true; } if(input.type == "email" && input.value){ not_pass = false; break; } if(input.type == "checkbox" && !input.checked) { not_pass = true; } if(input.type == "checkbox" && input.checked) { not_pass = false; break; } } for(var i = 0, len = selects.length; i < len; i++) { select = selects[i]; if(!select.value) { not_pass = true; break; } } if (not_pass) { $("#req-message").show();//this div # in your form return false; } else { //do something here } });