I have a table with several rows of data. Each row is it's own entity. It's not all associated to one form. Essentially each row is a form:
How can I use jQuery to say: for that row, if fName, lName and email are not blank, and email is valid. Enable the submit button. If not, disable the submit button?
Goal is to make sure each row is valid before allowing the user to submit. And then after submit, having control to remove the row?
Thoughts Thanks
Here's how I'd do it (see jsfiddle.net/marke/mvBNS):
jQuery(function() {
// You may want to use a different regular expression;
// this is just the first one I found on the 'net
var email_regex = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
function validateRow(tr) {
var valid = true;
tr.find('input[type="text"]').each(function(i, el) {
if (!el.value.replace(' ', '')) return valid = false;
if (el.name == 'email' && !email_regex.test(el.value)) return valid = false;
});
tr.find('input[type="submit"]').attr('disabled', valid? null : 'disabled');
}
jQuery('tr').each(function(i, el) {
validateRow(jQuery(this));
}).find('input[type="text"]').change(function() {
validateRow(jQuery(this).closest('tr'));
});
});
.bind('change keyup', fn) instead of .change(fn) near the bottom....What you're basically looking for is form validation, correct? There are a variety of jQuery form validation plugins out there that will implement the behavior you're looking for. You can define validation rules for each field and if those rules don't pass, the user won't be able to submit the form. This type of behavior should be common in pretty much any jQuery plugin you go with.
http://bassistance.de/jquery-plugins/jquery-plugin-validation/ should get you started. There are others too.
Copy and paste this into a javascript console on that frame and you'll be good to go. http://fiddle.jshell.net/NmpaM/show/
valid_email_regx = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
// add change event to each text box
$("table :text").change( function(){
// Select every field in row
$(this).parents("tr").find(":text").each(function(index){
// If field fails validation, disable field and exit loop
if($(this).val() == '' || ($(this).attr("id") == "email" && !valid_email_regx.test( $(this).val() ) ) ){
$(this).parents("tr").find(":submit").attr("disabled", true);
return false;
}else
$(this).parents("tr").find(":submit").attr("disabled", false);
})
});
// Add this to $(document).ready() to initally run function
$("table :text").change()
(You'll want to change "table" to a specific id.)
Use this code.I have given a id to table to identify it
var tbody = $('#tableId');
var trs = tbody.children();
var row = 0;
for (row = 0; row < trs.length; row++) {
var txts = trs[row].getElementsByTagName('input');
var isFilled=false;
for (i = 0; i < txts.length; i++) {
if(txts[i].type=='text'){
isFilled=checkRequired(txts[i]) && isFilled
}
}
if(isFilled){
trs[row].getElementsByTagName('input');
for (i = 0; i < txts.length; i++) {
if(txts[i].type=='submit'){
txts[i].enabled=true;//set your css values here
}
}
}
}
function checkRequired(o) {
if (o.value== null || o.value =='') {
return false;
} else {
return true;
}
}
You should only really bother reading this post if you are avoiding implementing some of the already powerful form validation plugins available to you as mentioned by other answers.
You could do something like this: http://jsfiddle.net/gnarf/NmpaM/3/
function checkForms() {
var rempty = /^\s*$/,
remail = /[a-z0-9!#$%&'*+\/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+\/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/,
// narrow the scope of the check when called as an event handler
check = (this.nodeType) ? $(this).closest('tr') : $('tr');
check.each(function() {
var $row = $(this),
$inputs = $row.find("input.text_field"),
$btn = $row.find('input.button[name="commit"]'),
$email = $row.find('input[name="email"]'),
numempty = $inputs.filter(function() {
return rempty.test(this.value);
}).length;
if (numempty > 0 || !remail.test($email.val())) $btn.attr('disabled', 'disabled');
else $btn.removeAttr('disabled');
});
}
checkForms();
// just so it updates everytime the input changes:
$("input").bind('change keyup', checkForms);
Why do not you use php to verification?
for example:
<table>
<tr>
<td>
<? if ($row['email'] != "") { echo "<form method='post' action='pageAct.php'> <input type='submit' name='x' value='y'> </form>"; } ?>
</td>
</tr>
</table>
and do that inside a loop while for instance.
