Jquery validation engine ajax, two fields same function? - javascript

The jQuery validation engine plugin has the ability to do ajax validation; which works gret except for one small catch...
It sends off the field ID instead of the field name to be validated.
Why is this an issue?
I have a simple item that to create it only requires one textbox to be filled out; so we have this as a modal on every page for managing said item.
We use the jQuery validation engine plugin to validate that the entered value is unique.
Now this also means that the modal shows up on the edit page. Which obviously has the title in a field as well for you to edit.
And we want this field to be validated as well but because the validation engine sends across the field ID instead of the field name we must give the two fields different ID's
e.g. createtitle and edittitle and then on the backend have
if($fieldId == 'createtitle' || $fieldId == 'edittitle'){$fieldId = $fieldId}
Which really is an ugly approach; is there any way to get it to use the name; or another attribute instead?

Maybe this plugin could help you. It uses class names of your element to validate.

Related

Is there any way to edit a URL to embed a form entry?

I know it is possible to embed form values into the URL as parameters if the form has an ID assigned to it. But what if it does not have an ID?
For example the "Search" field in this page:
http://au.autodesk.com/speaker-resource-center/call-for-proposals/voting
<input type="text" placeholder="Search " class="form-control ng-valid ng-dirty search-box" ng-model="search.$" ng-change="updateButtons()">
I know it is possible to embed form values into the URL as parameters if the form has an ID assigned to it.
That is not true.
Server-side (and occasionally client-side) code on a page may read the query string as a means to set default values for form controls (typically so that a form can be corrected and resubmitted if there were errors in the previous attempt).
In these cases, the name attributes will usually map onto the query string (because the form will generate the query string from the name attributes). Often an input will be given an id that is the same as its name.
It is entirely under the control of the site's authors.
There is no way to set values of inputs on another site without the other side providing a mechanism to allow you to do that.
There's a few different ways to do that. Looking at that HTML, it's the first text-type input inside the div, so the first method that comes to mind is this:
You could pull out the div (using the class "search-area") and then target the first text input box within that div. I don't know whether you're using jQuery or native JS or exactly what language/library/framework you're using.
JQuery would be something like:
var inputElement = $(".search-area")[0].first()
This SO answer may help:
jQuery: how to find first visible input/select/textarea excluding buttons?
Edited to add: Answer is targetting the input element. As the answer from someone else mentions.. You can't actually do what you're wanting to do with the URL.
Edited again. Misread the question. I'll leave this here in case someone else needs to know how to target an input field that doesn't have an ID. Alternatively, I have no problems if someone wants to delete this answer.

Get Input Field value using DTM on Submitting a form

I have two input fields that had the user access card and password. and the user click on submit button to authenticate.
I'm using DTM in my app to capture the user navigation but I want also to get the values of those field to my DTM so I would know who the user is.
And here is what I tried but with no luck.
Created Data element as below:
And created Event based rule. But not sure how to get the values to be shown in my report:
Thanks for your help.
Example Form
Since you did not post what your form code looks like, here is a simple form based on what I see in the screenshots you posted, that I will use in my examples below.
<form id='someForm'>
User Name <input type='text' name='userName'><br>
Password <input type='password' name='userPass'><br>
<input type='submit' value='submit' />
</form>
Data Elements
Okay first, let's go over what you did wrong.
1) You said you want to capture two form fields, but you only have one data element...maybe? You didn't really convey this in your question. I just assumed as much because of what you did throughout the rest of the screenshots. But to be clear: you should have two separate data elements, one for each field.
2) The CSS Selector Chain value you used is just input, so it will select the first input field on the page, which may or may not coincide with one of the input fields you are looking to capture. So, you need to use a CSS selector that is unique to the input field you want to capture. Something as simple as input[name="userName"] will probably be good enough (but I cannot confirm this without seeing your site). You will need to do the same for the 2nd Data Element you create for the other input field (e.g. input[name="userPass"])
3) In the Get the value of dropdown, you chose "name". This means that if you have for example <input type='text' name='foo'>, it will return "foo". Since you want to capture the value the user inputs, you should select "value" from the dropdown.
Solution
Putting all the above together, you should have two Data Elements that look something like this (one for the user name field and one for the password field; only one shown below):
Event Base Rule
Okay first, let's go over what you did wrong.
1) The value you specified in Element Tag or Selector is input. You aren't submitting an input field; you are submitting a form. Input fields don't even have a submit event handler! Your Event Type is "submit", so at a minimum, Element Tag or Selector should be form. But really..
2) Ideally, you should use a CSS Selector that more directly and uniquely targets the form you want to trigger the rule for. For example, maybe the form has an id attribute you can target in your CSS Selector. Or maybe the form is on a specific page, so you can add additional conditions based on the URL. What combination of CSS Selector or other conditions you use to uniquely identify your form depends on how your site is setup. In my example form above, I added an id attribute, so I can use form#someForm as the CSS Selector.
3) You checked the Manually assign properties & attributes checkbox, and then added two Property = Value items. This tells DTM to only trigger the rule if the input has a name attribute with value of "userName" AND if it has a name attribute value of "userPass". Well name can't have two values at the same time, now can it!
<input name='foo' name='bar'> <!-- bad! -->
All of this needs to be removed, because again (from #1), you should be targeting a form, not an input field.
4) For good measure, looks like you added a Rule Condition of type Data > Custom, but the code box is empty. The rule will only trigger if the box returns a truthy value. Since there is no code in the box, it will return undefined (default value returned by a javascript function if nothing is returned), which is a falsey value. This also needs to be removed.
Solution
Putting all the above together, the Conditions section of the Event Based Rule should look something like this:
But again, ideally your conditions should be more complex, to more uniquely target your form.
Referencing the Data Elements
Lastly, you can reference the input fields to populate whatever fields in the various Tool sections with the %data_element% syntax. For example, you can populate a couple of Adobe Analytics eVars like this (data element names reflect the examples I created above):
Or, you can reference them with javascript syntax in a custom code box as e.g. _satellite.getVar('form_userName');
Additional Notes
1) I Strongly recommend you do not capture / track this type of info. Firstly, based on context clues in your post, it looks like this may count as Personally Identifiable Information (PII), which is protected under a number of laws, varying from country to country. Secondly, in general, it is a big security risk to capture this information and send it to Adobe (or anywhere else, really). Overall, capturing this sort of data is practically begging for fines, lawsuits, etc.
2) Note that (assuming all conditions met), the "submit" Event Type will track when the user clicks the submit button, which is not necessarily the same thing as the user successfully completing the form (filling out all the form fields with valid input, etc.). I don't know the full context/motive of your requirements, but in general, most people aim to only capture an event / data on successful form completion (and sometimes separately track form errors).

jquery validate plugin, validating form fields of only current screen

I am using jquery validate plugin to validate form fields . I am also using jqtree . on click of every child node a section of form is visible to user, which is supposed to be filled with values.For every child there is a form content to be filled. Entire tree content is declared within one form only. I have a button in the form which on click generates json file. I am calling the function below to validate form
$("myform").validate();
....
if($("#my-form).valid())
generate the json file
but this is not validating the entire form. suppose I am on childNode1 it validates only form section defined for childNode1. As far as I have understood jquery validate plugin should validate entire form when correct form id is specified. But can anyone tell me what has gone wrong in my approach?
The .validate() method does not "validate the form". It only initializes the plugin on the form. .valid() will programmatically trigger a validation test.
Your code:
$("myform").validate();
....
if($("#my-form).valid())
generate the json file
$("myform") - Is that supposed to be an id, class, or name? As you've written it, it's looking for a <myform></myform> element.
$("#myform") // id="myform"
$(".myform") // class="myform"
$("[name='myform']") // name="myform"
Is your form element called myform or my-form? If it's the same <form> element, then the two jQuery selectors would be the same.
$("#my-form) is missing the closing quotation mark.
If the id of the <form> element is "myform", then your code should be...
$("#myform").validate(); // <- initialize the plugin
....
if ($("#myform").valid()) { // <- test the form's validity
// generate the json file
....
}
OP Title: jquery validate plugin, validating form fields of only current screen
Your question does not seem to have anything to do with the title. There is only one form described in your OP, and since this is JavaScript, only the page that's loaded in the browser is relevant. Not sure what you mean by "current screen".
but this is not validating the entire form. suppose I am on childNode1 it validates only form section defined for childNode1. As far as I have understood jquery validate plugin should validate entire form when correct form id is specified.
By default, the plugin will not validate any form fields that are hidden. You would manipulate the ignore option to over-ride this behavior. Setting ignore to [] will tell the plugin to ignore nothing and validate all fields including the hidden ones.

Enable ASP.Net validator without immediately running validation

Question
Can I enable an ASP.Net validator without running validation immediately (i.e. giving the user a chance to input values before running it, but still force running validation on form submit)?
Background
I have a form that allows a person to input their family data when they check in their child(ren) into a public daycare system. We have five fields that I need to force parents to actively consider (allergies, special needs, etc). The values are not actually required, so too many parents were just skipping over the fields when their children should have had values specified.
My solution is to have a required field validator that's disabled if they click an N/A checkbox next to the textbox. (If someone has a better solution, I'm all ears; the UI of this form--which I inherited--makes me want to gouge out my eyes.)
The other thing is that when the "Add Family" button is clicked, four empty rows are auto-generated: two adults and two children. Whether a row represents a child or an adult is determined by a drop-down in that row. If "adult" is selected, or if the first name textbox in that row is empty, the validators are disabled.
The validators of all five fields are enabled as soon as both the drop-down selected value is "child" AND the first name textbox is not empty. The issue is that running ValidatorEnable() causes the form to validate. In the common case, the fields will be empty, since first name and "family role" (adult/child) will be inputted before whether that person has allergies or are potty trained. This means as soon as they input the name into a row specified as child, ASP.Net's all like "HEY, DUMMY, YOU HAVE AN INVALID FIELD!!!1!".
So, I would like to enable the validator, but prevent validation until the user actually either inputs an empty value into the allergy textbox, or they try to submit the form.
Is this possible?
Note, I would use a custom field validator, but validation isn't run on empty fields; afaik, only required field validators do that.
I've just adapted the answer here: http://veskokolev.blogspot.co.uk/2007/11/how-to-disable-validation-group-with.html to enable some validators client-side with jQuery. Once they were enabled, the validation function did run - I don't know how to stop it (without modifying the ASP.NET JS code, which I guess is an option?); so I simply hid the messages until the validation is run again (which is easy enough with $(x).hide()).
Considering all the client-side code does is show the warning and stop you submitting I think this is OK. The usual things that will cause the validator to re-run will re-show the message.
So if I have validators like:
<asp:Validator runat="server" CssClass="js-validator-set-a" />
I can use this Javascript:
toggleValidators('.js-validator-set-a', true);
function toggleValidators(selector, enable) {
// get the page validators into a jQuery object
var vals = getJqueryObjectFromArrayOfEls(Page_Validators)
vals.filter(selector).each(function (i, o) {
ValidatorEnable(o, enable);
$(o).hide();
});
};
function getJqueryObjectFromArrayOfEls(elsArray) {
var x = $();
$.each(Page_Validators, function (i, o) {
x = x.add($(o));
});
return x;
}
I just came across a similar requirement. WhatI did was first to set a valid value to the compnent to be validated, then enable the validator and finally I cleared the value in the component again. Something like
$('#<%= tbxValue.ClientID %>').val('X'); // set a value to the textbox
ValidatorEnable(<%= rfvValue.ClientID %>, true); // enable the required field validator
$('#<%= tbxValue.ClientID %>').val(''); // clear the value from the textbox
Yes, it's possible in a variety of ways. The two most common and perhaps sensible things to do are :
Have validation occur completely in the code-behind via code only
Have ASP.NET validators that are set to enabled=false and then turn them on and call Page.Validate()
Instead of using that function, you can make your own function that has some of the same code as ValidatorEnable, but wont trigger the validation.
function myValidatorEnable(val, enable) {
val.enabled = (enable != false);
}

Custom validations troubles

I’m using Sys.Mvc to count errors and I have added my own custom validations by jQuery.
var validationErrors = Sys.Mvc.FormContext.getValidationForForm(this).validate('submit');
var errorsCount = validationErrors.length;
And also I have some fields, which will by hide (by using jQuery .hide();)
Question: How I can remove errors from Sys.Mvc.FormContext if the required element is hidden and add the error if the element is appearing again?
OR
How I can ignore hidden elements validation errors?
Best regards Paul.
Try to initialize the field even if it is hidden (using jQuery), and insert a temporary value. after submitting the form - you can insert the right value into the hidden fields (in the controller).
Something like this:
$("#myField").hide();
$("#myField").val("temporaryValidValue");

Categories