Short
What I want to do is following: At first, function validate() must check all inputs one by one: if they are not empty (or whitespaced) then move to if statement (for checking radio buttons) But if some of inputs empty then stop whole validate function and focus on empty input.
Here is result: http://jsfiddle.net/tt13/y53tv/4/
Just press ok button, you'll see that it finished first function and fires if too. But I want to exit from whole validate() function in case there is empty field, not only from each() function
Detailed
JS
function validate() {
$('.var_txt').each(function() {
if ($.trim($(this).val()) == '') {
$(this).focus();
return false;
}
});
if (!$(".answer:checked").val()) {
alert("boom");
return false;
}
return true;
}
$(document).ready(function() {
$("#add_question").submit(function(e) {
if (validate()) {
alert("good");
}
e.preventDefault();
})
});
HTML Markup
<form id="add_question" method="post" action="">
<table>
<tr>
<td class="var_label">
<input class="answer" type="radio" name="answer" value="a" /> a)
</td>
<td>
<input type="text" class="var_txt" name="var_a" />
</td>
</tr>
<tr>
<td class="var_label">
<input class="answer" type="radio" name="answer" value="b" /> b)
</td>
<td>
<input type="text" class="var_txt" name="var_b" />
</td>
</tr>
<tr>
<td class="var_label">
<input class="answer" type="radio" name="answer" value="c" /> c)
</td>
<td>
<input type="text" class="var_txt" name="var_c" />
</td>
</tr>
<tr>
<td class="var_label">
<input class="answer" type="radio" name="answer" value="d" /> d)
</td>
<td>
<input type="text" class="var_txt" name="var_d" />
</td>
</tr>
<tr>
<td class="var_label">
<input class="answer" type="radio" name="answer" value="e" /> e)
</td>
<td>
<input type="text" class="var_txt" name="var_e" />
</td>
</tr>
</table>
<input type="submit" name="submit" value="ok" />
</form>
Add a flag that has to be false to continue.
function validate() {
var invalid = false;
$('.var_txt').each(function() {
if ($.trim($(this).val()) == '') {
$(this).focus();
invalid = true;
return false;
}
});
if (invalid) {
return false;
}
if (!$(".answer:checked").val()) {
alert("boom");
return false;
}
return true;
}
$(document).ready(function() {
$("#add_question").submit(function(e) {
if (validate()) {
alert("good");
}
e.preventDefault();
})
});
We can break the $.each() loop at a particular iteration by making the callback function return false. Returning non-false is the same as a continue statement in a for loop; it will skip immediately to the next iteration.
Set a flag at the beginning of your validation: var broken = false;. Inside the each, just before return false;, add broken = true;. Then after your each code add if( broken) return false;
Like that?
function validate() {
var pass = true;
$('.var_txt').each(function() {
if ($.trim($(this).val()) == '') {
$(this).focus();
pass = false;
return false;
}
});
if (!$(".answer:checked").val()) {
alert("boom");
pass = false;
return false;
}
return pass;
}
Add a variable that checks if the conditions are true.
Related
First of all, sorry for the post's title.
I am trying to get references from these questions:
GetElementsByName with array like name
getElementsByName: control by last partial name
How can I select an element by ID with jQuery using regex?
And more or less I understood how to proceed.
I am using this code to check all the <input> and prevent the form from being submitted if any of the field is empty:
$('form[id="insertForm"]').on("submit", function (e) {
var form = document.getElementById("insertPanel");
var inp = form.getElementsByTagName('input');
for(var i in inp){
if(inp[i].type == "text"){
if(inp[i].value == ""){
inp[i].focus();
e.preventDefault();
$("#formAlert").show(400);
break;
}
}
}
});
The "problem", is that I was asked to add an exception, and one of these <input> can be empty.
The form is similar to this, what I post here is simplified:
<form id="insertForm" >
<div id="insertPanel">
<input type="text" name="FOO1" id="FOO1" />
<input type="text" name="FOO2" id="FOO2" />
<input type="text" name="FOO3" id="FOO3" />
<input type="text" name="FOO4" id="FOO4" />
<button type="submit" name="submit" value="Submit" >Send</button>
<table id="tab_logic">
<thead>
<tr>
<th>Bar1</th>
<th>Bar2</th>
<th>Bar3</th>
<th>Bar4</th>
<th>Bar5</th>
<th>Bar6</th>
<th>Bar7</th>
<th>Bar8</th>
<th>Bar9</th>
</tr>
</thead>
<tbody>
<tr id='addr_100'>
<td>
<input type="text" name='prefs[0][FooBar_A]' />
</td>
<td>
<input type="text" name='prefs[0][FooBar_B]' />
</td>
<td>
<input type="text" name='prefs[0][FooBar_C]' />
</td>
<td>
<input type="text" name='prefs[0][FooBar_D]' />
</td>
<td>
<input type="text" name='prefs[0][FooBar_E]' />
</td>
<td>
<input type="text" name='prefs[0][FooBar_F]' />
</td>
<td>
<input type="text" name='prefs[0][FooBar_G]' />
</td>
<td>
<input type="text" name='prefs[0][FooBar_H]'/>
</td>
<td>
<input type="text" name='prefs[0][FooBar_I]' />
</td>
</tr>
<tr id='addr_101'/>
</tbody>
</table>
<a id="add_row">Add Row</a>
<a id='delete_row'>Delete Row</a>
</form>
I removed all the CSS. Kept is really simple.
I was asked to NOT check the input <input type="text" name='prefs[0][FooBar_G]' />
As you can see, it is an array, at every "add row" click, there is a jquery that adds a new row with name='prefs[1][FooBar_A]' and so on.
I tried to work on the for():
$('form[id="insertForm"]').on("submit", function (e) {
var form = document.getElementById("insertPanel");
var inp = form.getElementsByTagName('input');
var SKIP = form.querySelectorAll('input[name$="FooBar_G]"]');
for(var i in inp){
if(inp[i].type == "text"){
if(inp[i].value == ""){
if (SKIP){ console.log("Element " + SKIP.innerText + " found. "); continue; }
inp[i].focus();
e.preventDefault();
$("#formAlert").show(400);
break;
}
}
}
});
And many other versions.. failing.
Anyone knows how to make this working?
let inputs = [...document.querySelectorAll('input')]
let reg = new RegExp('FOO[0-9]', 'g')
let filtered = inputs.filter(({ name }) => name.match(reg))
console.log(filtered)
<input type="text" name="FOO1" id="FOO1" />
<input type="text" name="FOO2" id="FOO2" />
<input type="text" name="FOO3" id="FOO3" />
<input type="text" name="FOO4" id="FOO4" />
<input type="text" name='prefs[0][FooBar_A]' />
<input type="text" name='prefs[0][FooBar_B]' />
<input type="text" name='prefs[0][FooBar_C]' />
<input type="text" name='prefs[0][FooBar_D]' />
$('form[id="insertForm"]').on("submit", function (e) {
var form = document.getElementById("insertPanel")
var reg = new RegExp('FOO[0-9]', 'g')
var inputs = [...document.querySelectorAll('input')].filter(({name}) => name.match(reg))
inputs.forEach((inp, i) => {
if(inp[i].type === "text" && inp[i].value === ""){
inp[i].focus();
$("#formAlert").show(400);
}
})
});
Use querySelectorAll to exclude that input (and to shorten your code). Specifically, the :not([name$=FooBar_G\\]]) selector to exclude the one you want to keep out. It can also be used to specify the text inputs.
You can simply the selector using the *= contains selector if you know that there will not be false positives. :not([name*=FooBar_G])
$('form#insertForm').on("submit", function(event) {
var inputs = this.querySelectorAll("#insertPanel input[type=text]:not([name$=FooBar_G\\]])");
for (var i = 0; i < inputs.length; i++) {
if (!inputs[i].value) {
inputs[i].focus();
event.preventDefault()
$("#formAlert").show(400);
break;
}
}
});
And to do it in a more modern way, I'd do this:
document.querySelector('form#insertForm').addEventListener("submit", function(event) {
const inp = Array.from(
this.querySelectorAll("#insertPanel input[type=text]:not([name$=FooBar_G\\]])")
).find(inp => !inp.value);
if (inp) {
inp.focus();
event.preventDefault()
$("#formAlert").show(400);
}
});
Some things:
1) if(SKIP) will always enter the branch as objects are truthy. You need compare sth (===)
2) If you already include such a heavy library like jquery you should use it everywhere to make it worth it
$('form[id="insertForm"]').on("submit", function (e) {
const inputs = $("#insertPanel > input").toArray();
const skip = $('input[name$="FooBar_G]"]')[0];
for(const input of inputs){
if(input === skip) continue;
if(!input.value){
input.focus();
e.preventDefault();
$("#formAlert").show(400);
break;
}
}
});
Suppose I have this html:
<td>
<input type="hidden" name="params[test][index]" value="0">
<input type="hidden" name="params[test][name]" value="2">
<input type="hidden" name="params[other][]" value="0">
<input type="hidden" name="params[test2]" value="0">
</td>
And I want to grab all the inputs of the params array into my jquery as an array or as a json:
(not sure of the syntax but something like that)
var $params = { test => {index =>0, name=>2},other=>[0],test2=>0};
What should I do?
You can create a plain object, iterate input elements using $.each(), use .split() with RegExp
var params = {};
$.each($("td input"), function(_, el) {
var param = el.name.split(/^\w+(?=\[)|\[|\]/).filter(Boolean).pop();
params[param] = el.value;
});
console.log(params);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="hidden" name="params[test][index]" value="0">
<input type="hidden" name="params[test][name]" value="2">
<input type="hidden" name="params[other][]" value="0">
<input type="hidden" name="params[test2]" value="0">
</td>
</tr>
</table>
Edit, Updated
You can use if, if..else conditions and statements, RegExp to parse .name attributes to get expected result described at OP
var params = {};
var re = /\[|\]/g;
$.each($("td input"), function(_, el) {
var param = el.name.match(/\[\]|\[\w+\]/g);
var prop = param.shift().replace(re, "");
if (param.length) {
if (!(prop in params) && param[0] !== "[]") {
params[prop] = {};
}
if (prop in params) {
params[prop][param.shift().replace(re, "")] = el.value;
} else if (param[0] === "[]") {
params[prop] = [el.value];
}
} else {
params[prop] = el.value;
}
});
console.log(params);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<table>
<tr>
<td>
<input type="hidden" name="params[test][index]" value="0">
<input type="hidden" name="params[test][name]" value="2">
<input type="hidden" name="params[other][]" value="0">
<input type="hidden" name="params[test2]" value="0">
</td>
</tr>
</table>
I am struggling to understand where there is a mistake.
After many tries, I tend to think that it's something about overalcheck()...
The append, clearelement and writeto are the additional mini functions and they are totally fine.
So, this script checks the form, and if everything is ok, opens a new page. However, if a field is empty or has a wrong type, it shows the relative error message (or a list of error messages).
I made a lot of variations, sometimes it opens without a completed form (like the code below), sometimes it shows the error message for 1 field only and then, and even if you complete all fields, it still doesnt open a new page.
I would appreciate your help.
<script>
function overallcheck ()
{
if(!checkname() || !checkemail() || !checkjob())
{
writeTo("problemArea","Error messages area");
if(!checkname())
writeTo("problemArea","Please insert a valid name");
if(!checkemail())
writeTo("problemArea","Please insert a valid email");
if(!checkjob())
writeTo("problemArea","Please insert your job");
return false;
}
return true;
}
function checkname()
{
clearElement("problemArea");
var fullname = document.forms['form'].fullname.value;
if (fullname.length == 0 || !isNaN(fullname))
return false;
}
function checkemail()
{
clearElement("problemArea");
var mail = document.forms['form'].Email.value;
if (mail == '' || mail.indexOf('#') == -1 || mail.indexOf('.') == -1)
return false;
}
function checkjob()
{
clearElement("problemArea");
var i;
for (i=0;i<4;i++)
{
if (document.forms['form'].job[i].checked) {return true;}
}
return false;
}
</script>
<body>
<form onsubmit="return overallcheck();" action="res.html" id=form target="_blank" method="GET">
<table>
<tr>
<td><b><p>blabla?</p></b> </td>
<td> <input type="text" name="fullname" size="20" placeholder="Enter a valid name"/> </td>
</tr>
<tr>
<td><b><p> E-mail: </p></b></td>
<td><input type="email" name="email" maxlength="15" size = "20" placeholder="Enter a valid email address"/> </td>
</tr>
<tr>
<p><td><b><p>bla?</td></p>
<td>1<input type="radio" name="job" value="gov" /><br/>
2<input type="radio" name="job" value="pri" /><br/><div id="problemArea"> </div>
3<input type="radio" name="job" value="unem" /><br/>
4<input type="radio" name="job" value="other" /><br/>
</td></tr>
</table>
<p>
<button type="submit" onclick="" >clickme</button>
</form>
</body>
</html>
Track each error type with it's own div. Wrap overallcheck in a try catch to and alert errors. This helped find the "Email" error.
function writeTo(id, msg) {
document.getElementById(id).innerHTML += "<p>" + msg + "</p>";
}
function clearElement(id) {
document.getElementById(id).innerHTML = "";
}
function overallcheck() {
try {
if (!checkname() || !checkemail() || !checkjob()) {
if (!checkname())
writeTo("problem_fullname", "Please insert a valid name");
if (!checkemail())
writeTo("problem_email", "Please insert a valid email");
if (!checkjob())
writeTo("problem_blah", "Please insert your job");
return false;
}
return true;
} catch (err) {
alert(err);
}
}
function checkname() {
clearElement("problem_fullname");
var fullname = document.forms['form'].fullname.value;
if (fullname.length == 0 || !isNaN(fullname)) {
return false;
}
return true;
}
function checkemail() {
clearElement("problem_email");
var mail = document.forms['form'].email.value; //Email.value;
if (mail == '' || mail.indexOf('#') == -1 || mail.indexOf('.') == -1) {
return false;
}
return true;
}
function checkjob() {
clearElement("problem_blah");
var i;
for (i = 0; i < 4; i++) {
if (document.forms['form'].job[i].checked) {
return true;
}
}
return false;
}
td {
vertical-align: text-top;
}
.problem {
color: red;
}
<form onsubmit="return overallcheck();" action="res.html" id=form target="_blank" method="GET">
<table>
<tr>
<td><b><p>blabla?</p></b>
</td>
<td>
<input type="text" name="fullname" size="20" placeholder="Enter a valid name" />
<div id="problem_fullname" class="problem"></div>
</td>
</tr>
<tr>
<td><b><p> E-mail: </p></b>
</td>
<td>
<input type="email" name="email" maxlength="15" size="20" placeholder="Enter a valid email address" />
<div id="problem_email" class="problem"></div>
</td>
</tr>
<tr>
<p>
<td><b><p>bla?</td></p>
<td>
1<input type="radio" name="job" value="gov" /><br/>
2<input type="radio" name="job" value="pri" /><br/>
3<input type="radio" name="job" value="unem" /><br/>
4<input type="radio" name="job" value="other" /><br/>
<div id="problem_blah" class="problem"> </div>
</td></tr>
</table>
<p>
<button type="submit" onclick="" >clickme</button>
</form>
i have created one form with dynamically created fields. and i have a one check box with unique ID . when user clicks that check box then only those two fields are visible ("name and age"). after clicking only "age" field need to be validate .
here is my code :
$(document).ready(function() {
$('#person').click(function() {
function formValidator(){
var age = document.getElementsByName('age[]');
for (var i = 0; i< age.length; i++) {
if(!isNumeric(age[i], "Please enter a valid Age")){
return false;
}
}
return true;
}
function isNumeric(elem, helperMsg){
var numericExpression = /^[0-9]+$/;
if(elem.value.match(numericExpression)){
return true;
} else {
alert(helperMsg);
elem.focus();
return false;
}
}
});
});
$(document).ready(function() {
$('#person').click(function() {
$('#name').attr('required','required');
$('#age').attr('required','required');
});
});
style is :
.selectContainer{
display:none;
}
input[type=checkbox]:checked ~ .selectContainer {
display:block;
}
Html code is:
<form action="" method="post" onSubmit="return formValidator()">
<label for="name">Any Accompanying Person ?:</label>
<input type="checkbox" name="person" id="person" >Yes
<div class="selectContainer">
<br>
<label>Person Details</label>
<p>
<div style="padding-left:70px;">
<input type="button" value="Add Person" onClick="addRow('dataTable')" />
<input type="button" value="Remove Person" onClick="deleteRow('dataTable')" />
</div>
</p>
<table style="padding-left:50px;" id="dataTable" class="form" border="1" >
<tbody>
<tr>
<p>
<td><input type="checkbox" name="chk[]" checked="checked" /></td>
<td>
<label>Name</label>
<input type="text" size="20" name="name[]" id="name" >
</td>
<td>
<label>Age</label>
<input type="text" size="20" name="age[]" id="age" >
</td>
</p>
</tr>
</tbody>
</table>
<div class="clear"></div>
</fieldset>
</div>
</div>
<h3>Choose Your Payment Option</h3>
<h1>
<div style="padding-left:150px;">
<input type="radio" name="type" value="visa">VISA/MASTER CARD:<br />
<input type="radio" name="type" value="cheque"> CHEQUE/DEMAND DRAFT<br />
<input type="radio" name="type" value="neft">NEFT<br /><br/>
</div>
<label></label>
<input type="submit" name="submit" value="submit"><br />
</form>
problem: the form field "age" is validating successfully by clicking check box ("Any Accompanying Person ?:"). problem is when user try to submit the form without clicking that check box then all so its asking for validate . how get salutation for this ? please help
The validator is within a click handler, which should live outside of that (On the base on the document.ready()).
Also if you just want to validate when that checkbox is clicked you could check it within the javascript and select it via the name of the checkbox (If it has a unique ID each time).
function formValidator(){
var age = document.getElementsByName('age[]');
if($("input[name = 'chk[]']").prop('checked')){
for (var i = 0; i< age.length; i++) {
if(!isNumeric(age[i], "Please enter a valid Age")){
return false;
}
}
}
return true;
}
Bring all javascript functions outside of click events. Try this formValidator function
function formValidator(){
if($("#person").is(":checked")) {
var age = document.getElementsByName('age[]');
for (var i = 0; i< age.length; i++) {
if(!isNumeric(age[i], "Please enter a valid Age")){
return false;
}
}
}
return true;
}
I want to know how can i live validate radio button like text box on click event or on key up or press event? Like textbox, when we start typing and if it passes validation, then error message is gone; in the same way i want to implement this functionality for radio button. I have the following code which works only for textbox on keyup event and not for radio buttons -
HTML -
<form name="form1" id="form1" method="post" action="">
<table border="0" align="center" width="50%" cellpadding="5">
<tr>
<th align="right" valign="top"><label for="txtemail">Email ID:</label></th>
<td>
<input type="text" name="txtemail" id="txtemail" size="30" onKeyUp="return isValid();" />
<span id="erremail"></span>
</td>
</tr>
<tr>
<th align="right" valign="top"><label>Gender:</label></th>
<td>
<input type="radio" name="gender" id="radmale" value="Male" onClick="this.checked; return isValid();" />
<label for="radmale">Male</label>
<input type="radio" name="gender" id="radfemale" value="Female" onClick="return isValid();" />
<label for="radfemale">Female</label>
<span id="errgender"></span>
</td>
</tr>
<tr>
<td align="right">
<input type="submit" name="btnsubmit" value="Register" onClick="return isValid();">
</td>
<td>
<input type="reset" value="Clear Form">
</td>
</tr>
</table>
</form>
JavaScript -
<script type="text/javascript">
var flag;
function isValid()
{
flag = true;
reqdField("txtemail", "erremail", "Email ID is empty");
isValidEmail("txtemail", "erremail", "Email ID is not valid", /^[a-z0-9_.-]+#[a-z-.]+\.[a-z.]{2,5}$/);
checkGender("radmale", "radfemale", "errgender", "Select your gender");
return flag;
}
// checking all required fields
function reqdField(ctrid, errid, errmsg)
{
var str = document.getElementById(ctrid).value;
if(str.length == 0)
{
document.getElementById(errid).innerHTML = errmsg;
flag = false;
}
else
{
document.getElementById(errid).innerHTML = "";
}
}
// checking is email id valid
function isValidEmail(ctrid, errid, errmsg, validExp)
{
var email = document.getElementById(ctrid).value;
if(email.match(validExp) == null)
{
document.getElementById(errid).innerHTML = errmsg;
flag = false;
}
else
{
document.getElementById(errid).innerHTML = "";
}
}
// checking is gender selected
function checkGender(ctrid1, ctrid2, errid, errmsg)
{
var male = document.getElementById(ctrid1);
var female = document.getElementById(ctrid2);
if(male.checked == false && female.checked == false)
{
document.getElementById(errid).innerHTML = errmsg;
flag = false;
}
else
{
document.getElementById(errid).innerHTML = "";
}
}
</script>
Another issue I am facing in this code is regarding reqdField() function. This function does work and only isValidEmail() runs. I only see email is not valid when it is left empty and can not display email id is empty. How can i achieve the same?
Here is the demo JSFiddle
<script type="text/javascript">
var flag;
function isValid()
{
flag = true;
reqdField("txtemail", "erremail", "Email ID is empty");
isValidEmail("txtemail", "erremail", "Email ID is not valid", /^[a-z0-9_.-]+#[a-z-.]+\.[a-z.]{2,5}$/);
checkGender();
return flag;
}
// checking all required fields
function reqdField(ctrid, errid, errmsg)
{
var str = document.getElementById(ctrid).value;
if(str.length == 0)
{
document.getElementById(errid).innerHTML = errmsg;
flag = false;
}
else
{
document.getElementById(errid).innerHTML = "";
flag = true;
}
}
// checking is email id valid
function isValidEmail(ctrid, errid, errmsg, validExp)
{
var email = document.getElementById(ctrid).value;
if(email.length == 0){
return;
}else{
if(email.match(validExp) == null)
{
document.getElementById(errid).innerHTML = errmsg;
flag = false;
}
else
{
document.getElementById(errid).innerHTML = "";
flag = true;
}
}
}
// checking is gender selected
function checkGender()
{
var ctrid1="radmale", ctrid2="radfemale", errid="errgender", errmsg="Select your gender"
var male = document.getElementById(ctrid1);
var female = document.getElementById(ctrid2);
if(male.checked == false && female.checked == false)
{
document.getElementById(errid).innerHTML = errmsg;
return false;
flag = false;
}
else
{
document.getElementById(errid).innerHTML = "";
return true;
}
}
</script>
and html is
<form name="form1" id="form1" method="post" action="">
<table border="0" align="center" width="50%" cellpadding="5">
<tr>
<th align="right" valign="top"><label for="txtemail">Email ID:</label></th>
<td><input type="text" name="txtemail" id="txtemail" size="30" onKeyUp="return isValid();" />
<span id="erremail"></span>
</td>
</tr>
<tr>
<th align="right" valign="top"><label>Gender:</label></th>
<td><input type="radio" name="gender" id="radmale" value="Male" onClick="return checkGender();" /><label for="radmale">Male</label>
<input type="radio" name="gender" id="radfemale" value="Female" onClick="return checkGender();" /><label for="radfemale">Female</label>
<span id="errgender"></span>
</td>
</tr>
<tr>
<td align="right"><input type="submit" name="btnsubmit" value="Register" onClick="return isValid();"></td>
<td><input type="reset" value="Clear Form"></td>
</tr>
</table>
</form>
Fiddle
$("input[type=radio]").click(function(){
var set = $(this).attr("name");
validateRadioSet(set);
});