How to trigger input's property required on HTML5? - ajax

My question is about how can I trigger the validation of required property without using the submit button
More or less I big a huge form, that is divide by a slider(steps), but is just one form. The point is, that form implement ajax at the end to submit the information that is serialize manually with javascript. So the problem is that the required (attribute, property) is not working, so you have to make the rule for empty input manually. I think is a waste, if you can do that with required.
So I want to bind every slide, to the required inputs.
Thank you in advance

Have you tried checkValidity() ( http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#dom-cva-checkvalidatity )?

Related

jQuery validate on cloned form fieldsets works but is ignored by .valid() method on the form element

I'm sure this has come up many, many times before but I am at my wit's end with this problem. I'll try and be as descriptive as possible without bloating the problem statement.
I am using the jQuery validate plugin for form validation. All form rules and messages are retrieved via ajax and then initialised. All form validation works like a charm until I start cloning fieldsets inside the form to give the user the ability to add additional entries.
The input fields react exactly as they should to changing values (error highlights and displaying messages etc), but when I call the .valid() method on the form it ignores the additional fieldset cloned from the first.
I have added test rules after cloning the fieldset, and again, the input field responds correctly to the newly assigned rule but gets ignored when calling .valid() on the form element.
I will add code snippets should anyone be willing to help me find the problem.
Thanks in advance!
Fred
Edit:
I have found that the .valid() method only uses the first fieldset in the form. Take note that all input names of cloned fieldsets are the same as the original. For example, say i have a field called productName in my original fieldset and i clone it, I will now have two inputs in the form with the same name attribute.
Could it be that jQuery validate only cares about the first instance it reaches and validates on that? I have seen posts about jQuery validate not playing nice with duplicate input names on forms but i believe it was resolved.

After a form is filled once, I blank out the form before filling it the next time (new conversation), but the borders remain red

I have used webshims for html5 form validation in a single page app with multiple pagelets(divs). The forms are not submitted but local javascript is invoked after each conversation and collected data is posted .
Next I iterate over all the fields and reset the values.
Then I take the new user back to the first pagelet having first form for the new conversation. This time even after filling the correct values the border does not turn green.
Note:
However when we select the field and click outside the field without filling it. and then after filling the correct data border turns green.
However when we tried to achieve it programmatically iterating over each field resetting it and using javascript focus method, that did not do the trick.
I am sure I must be missing some thing. would be able to point out what.
Regards
Barman
I'm not sure, what you want to achieve. I would need to see some code. If you change the value programmatically you can update the validation ui with the event refreshvalidityui on the form field. If you want to reset the ui, you can either trigger a reset event on the form or resetvalidityui on the form field
$('input').val('foo').trigger('refreshvalidityui');
or
$('input').val('foo').trigger('resetvalidityui');
or
$('form').trigger('reset');
Please let me know, if this helps.

Different validation rules for different actions JSF

i'm trying to implement an edit/add profile page which looks the following:
image upload component (Tomahawk t:inputFileUpload) with upload button
several input text fields
cancel and save button
As said, this form is used for adding a new profile as well as editing existing ones. At first, i used two elements, one for the text input, one for the upload component. The problem with this is, since the upload componenet does not support ajax/ partial rendering, the whole page is reloaded and any changes on the text inputs is lost. When i use one unified , the validation is triggered on the textfields when the upload button is pressed and the user is forced to fill out all the inputs first, before it is possible to upload an image.
My desired behaviour would be, that if the textinputs are unchanged, i can still upload the picture while changes are being applied to the backing bean and validated. Validation on unchanged/empty fields should only be triggered, when the final submit button is pressed. How can this be done? Any standard scenario/best practice methods for this or do i have to implement a valueChange Listener? Thank you guys in advance and kind regards!
Solved the problem, i wrote a custom validator and checked for the action that triggered the submission of the form using this:
ctx.getExternalContext().getRequestParameterValuesMap().containsKey("form:uploadButton");
Where ctx is the current instance of FacesContext. Maybe this helps someone, it is a workaround however it does the job.

How to disable the display of validation errors in view (Cakephp)

I have a view which is containing 5 forms submitting separately but to the same model. The aim of this is allow the user to fill all the forms in the same page and be able to quickly compare the values he puts in for each form. Each form has most of the fields in common with another one. If you want a idea of the stuff, imagine that you are a soccer trainer and you want to be able on the same page to set up your team tactics for each half time. So I'll have a HalfTime model with two forms on the same page, one for each half time
So when I submit Halftime 1 form and that the validation fails, the validation errors of HalfTime1 is displayed in HalfTime2 fields too. I would like to be able to disable the validation of one form according if it wasn't submited.
My idea was to send a variable from the controller to the view containing the name/id of the current half time and from this variable, displaying validation errors only in the ccorrect form.
Do you have any idea on how I can disable the display of the validation errors in one field?
Thank you a lot!
Set the error option to false when you use form input. ie:
echo $this->input('Halftime2.title', array('error' => false));

Can a CRM 3.0 PreCreate callout fill form fields in advance?

I just finished my first CRM callout, and it's working great, but it doesn't actually seem to take effect until the form that calls it is saved. It's a PreCreate deal that assigns a value to one of the attributes present on the form. Is there any way to get it to assign the new value and display it on the form as soon as you load it, or is this just the way it works?
You'd have to add some JavaScript to the onload event of the form and default any form fields that way. Callouts don't fire until after the save event happens, so they can't be used to default fields in the UI.

Resources