JQuery :: Dynamic Inputs Targeting For Validation Rules?
May 6, 2011
I'm working on the validation plugin for jquery and trying to figure out how I can target the text boxes that are dynamically generated with this change event. I'm trying to target them so I can set up rules for my page.
I will like to know if there is anyway to view all the rules that I have currently in the Jquery validation plugin. Currently, I am trying to add in rules dynamically through the rules(add) function after adding some dynamic fields through the user inputs. the rules are added in this manner.
Im using the jquery validation plugin: [URL] The forms are generated dynamically using php, with the standard class 'required' the plugin looks for, however when it comes to adding my custom rules i want them to be dynamic, as the name/id attributes are generated based on what the id of the form is: i.e. the form ID is #comp so an input would have a name attribute of comp_forename, comp_surname so basically the validator is initiated by looking in the body for a form: var form_id = $('body form').attr('id'); Then how can icancatante the strings to created the name attributes dynamically in the rules here:
I have a form with multiple fieldsets which are visible conditionally. There are three submit buttons "Abandon", "Save" and "Save & Continue". Each button should validate specific controls of the form and submit it. I tried setting "onsubmit: false" and checking for "$('#myForm').valid ()" on click of these buttons., but that validates all controls of the form.
I'm using the validation plugin and I have a lot of rules set on my page [code]...
My question, how can I disable all the rules or the entire validation ? I can submit the form via two buttons to either save the page (here I need validation) or "delete" the current view (here I do not want any validation)
I have created a php filter for a form that returns an error message if someone uses profanity in the comments field and makes them redo that field before inserting into a database. Here is the code I use for that (I have omitted the lengthy list of profanity..):
Code: if (isset($_POST['comments'])){ $comments = $_POST['comments']; $filter=array("badword1", "badword2"); for ($i = 0; $i < count($filter); $i++) { ..... if (preg_match("/".$filter[$i]."/i", $comments)) { $profanity_msg="Profanity is not allowed"; }}} //Then this before the form if(isset($profanity_msg)){ echo $profanity_msg; }
However, the rest of my form is validated through JQuery Validator and I would like to make a rule that would do the filtering instead of relying on the php. Here is a sketch of what I think I will need to do to build the custom rule, but I am not sure how to write the equivalent function to my php code above.
Code: $(document).ready(function(){ //custom validation rule - profanity $.validator.addMethod("profanity", "Equivalent of my php function goes here..." ); //validation implementation will go here. $("#TestForm").validate({ rules: { comments: { required: true, profanity: true }}, messages: { comments: { required: "* Required", profanity: "* No Profanity Allowed" }}}); })
I have the following html, field xxx requires a number from 0 to 100 when percentage is selected, and 0 to inifinity when dollar is selected.what's the best practice to setup validation for this?the key is to control the maximum value.I have tried depends expression in a max rule, but it doesn't seem that it can satisfy my requirement.
Basically, i have a CSS/jQuery keyboard from NETTUTS; however my problem is trying to select multiple inputs. Everything works as it should, however i want to select the input, store it in hidden field (which input is current), then when i start to type, it can enter the characters into that input field (that is selected). Currently, it just allows me to enter inputs into a single textarea. I want to onfocus, set as "Focusedfield", and when i type it goes into that field.
Here is my JS code to select/store the "focusedField". Triggered by onFocus. to make the textArea i select, be the one i type into.
Code:
Here is the jQuery
The issue is with this first $write variable. I cannot for the life of me, get it to detect the dynamic variable. When i hardcode the inputs name, it works, but when i try something dynamic - it doesn't. Line 2 of that function is where my issue is (i believe).
Code:
I've tried to replace
Code:
With
Code:
And
Code:
As well as plain old JS var "current_form".
I think its just 1 or 2 lines where this issue is.
I am using the Validation plugin to validate a form that emails the current pages URL to the recipients entered in to the "email to" field. I want to validate that field for multiple emails addressed separated by commas...and ideas on how to do this? I'm a bit new to jQuery so I am a little confused how to approach this. I was thinking somehow altering the email function so that is parses the input and does a for each on every email address. Is this correct thinking? Is there an easier way to do this?
getting dynamic rows inputs to multiply 'onchange' of the value in the input in each row. It works in the first row inserted no matter what rowindex that row is moved to. All following rows only accept the initial input value and never change the 'cost' innerHTML of the colRow[i]. I figure I need a parentNode.parentNode syntax to make this function work in all rows.
Every thing is Client-side javascript and all rows are inserted to 'cartbody.insertRow[0]'. 'qtymultiply()' Function As is:
Code:
function qtymultiply(){ var cartitems=document.getElementsByClassName('itemrow'); var colRows=cartitems;
I have a form with dynamic fields. Each set of new fields contains two fields that are required. I validate them by using a class. The downside is that if you have 3 lines of fieldsets you get 6 validation errors if you leave them empty. Is there any way to "group" these messages? The fieldsets contain a from and to date. So if you leave them empty you get a message "Check from fields" ?
I am using jquery.validate.js for my validation. I need to validate some dynamic input fields. By using class now I am able to validate that. Here my problem is to validate for the file extension.
For static files I use as file: { required:true, accept: "png|jpg", },
How to write the accept validation for dynamically generated input fields. Below is my input field where the ID and name will change for every input field.
i have a xml document (static) that I need to test what is in a grand child element. The real application is a jqGrid. I have a onSelectRow operation going on. I can click on a row and get a response (in a alert window) for any root children. But how do I do this for anything deeper in the tree? A portion of my xml is attached.
I have a page generate by ASP and I want to validate the form value. Generated page by ASP :
<form method=post action="<%=strPrgName%>" name="OrderForm"> <% for i = 1 to itemcount %> Name : <input name=toname<%=i%> onBlur="validateName(this)"> <% next %> <input type=submit value="View">
For example itemcount = 2, html code will be like this : <form method=post action="<%=strPrgName%>" name="OrderForm"> Name : <input name=toname1 onBlur="validateName(this)"> Name : <input name=toname2 onBlur="validateName(this)"> <input type=submit value="View">
Javascript : <script language="JavaScript"> function validateName(field) { var val = field.value; if(!/[a-z]/.test(val)||val=="") { alert("Format name wrong !"); field.focus(); field.select(); } } </script>
I got this script and modify it, the original code for validating number only. My need is this script validate the form to check if input only alphanumeric (a-z, A-Z, "," and ".").
Here is my code for a table the "Add" button adds a dynamic row into the table. I need to do a client side validation for the table so tht all the text boxes and the selection boxes shall have a value entered or selected. None should be left epty as well atleast one row of the table shall be complete.
I have a JQuery lightbox popup but am struggling how to control the content of the lightbox. all the examples given on the internet are from anchor links that are fixed. I however, need to use it from images pulled from the database so therefore the content will be different depending on what image is clicked. I already have the content I need in a div, so is there a way of targeting that div so it is displayed within the lightbox?
I am putting together a validation function and am having trouble with targeting multiple elements.[code]an onclick event fires my validation function. If any of the fields are empty, the appropriate error message should display.This sort of works. If all of the fields are empty, only the error message of the first element is displayed, not all 3.
is there a way to ask if the #FORM.fieldname# exist to proceed with the next one ? FYI : StartDateName22 is a dynamic generated textbox i am using the following code :
<cfif not isDefined (#FORM.StartDateName22#) or #FORM.StartDateName22# or EQ "" > <cfoutput> Elemnt 2,2 is not defined </cfoutput> <cfelse> <cfoutput> [Code]...
I have a database that shows about 5 to 10 recorrds on a page that contain forms for the user to fill out. The number of rows is unknown and depends on the user query.On the page there can be 2 or 10 records displayed ..each containing a form that needs to be validated.How can i use that. The IDs of the elements would have to be generated dynamicly i suppose. Anyone of you got an idea how to do that ?
I have a form which contains a number of check boxes in format of fielduse_x where x is incremented each time (1 - 30)
Everytime one of the checkboxes is ticked or unticked i want to perform a function for related boxes but i am having difficaulty doing this.
The code i have in the javascript is :
function changeStatus(f) { alert(f); if(document.newForm.fielduse_[f].checked==true) alert("YES") else alert("NO"); }
f is passed from the form field and contains the number (1 - 30). I know that the form is passing the values across as alert(f) gives the correct number. I don't seem to be able to get the next line to work. How do i put the value of f into the if statment as what i have done isn't working
I have an HTML table with <tr> sections that is generated by php which looks like the following HTML Code: <tr align='center' class='row_a'> <td align='center'><input id = 'assign0' type='checkbox' name='agent_8949' value='0' /></td></tr> <tr align='center' class='row_b'> <td align='center'><input id = 'assign1' type='checkbox' name='agent_8950' value='1' /></td></tr> <tr align='center' class='row_a'> <td align='center'><input id = 'assign2' type='checkbox' name='agent_8951' value='2' /></td></tr> <tr align='center' class='row_b'> <td align='center'><input id = 'assign3' type='checkbox' name='agent_8952' value='3' /></td></tr>
The id's and values are generated by php, my problem is, I want to use javascript to check if anyone of the check boxes has been checked on submission meaning that I have to go through the <tr> list. Here is my JS code which only works for one id. Code: //I know the length of the checkbox (checkBoxID) fields which is the number of rows in the database table function validate(checkBoxID){ var ids_Prefix = 'assign';//we know all the ids starts with this string for (var i = 0; i < checkBoxID; ++i) { if(document.getElementById(id_Prefix+i).checked == false){//how do I check the next one? alert("You did not make any selection"); return false; }}}
I'm customizing the cycle plugin a bit from [URL] , which slides through a number of items.The issue I have is selecting a child object, to get its 'alt' attribute, and display it as a description. Using the default example:
function onBefore() { $('#output').html("Scrolling image:<br>" + this.alt ); }
...works great when each item is an image. But I need to link each element, so my markup looks like this: