JSF validate dialog form - ajax

I have a dialog form popup when I click one button, this form is used to create a new school record with just one field.
I have add required validation to this only input field, and everything works fine, but the only thing I don't know how to do is when I click submit, whatever form validate or not, the dialog will dismiss by following code:
initDataTable();
// Dismiss the dialog
$('#dialogNewSchool').dialog('close');
before the dialog close, I should put the form validation check (something like the return from validation class), how I can do this in javascript? I'm using JSF 2.1 implementation.
Btw, I don't want to use client side validation, because not only required validation needed for this field.
Thanks. ;)

If I got you right you want to keep dialog open in case of validation errors?
Than you can add the following code somewhere in your page
<h:panelGroup id="global_flag_validation_failed_render">
<h:outputText id="global_flag_validation_failed" value="true" rendered="#{facesContext.validationFailed}"/>
</h:panelGroup>
And upon clicking your submit button render the above block like this:
<f:ajax onevent="closeMyDialogIfAllOk" render="#form global_flag_validation_failed_render"></f:ajax>
and in your js code
function closeMyDialogIfAllOk(data){
if(data.status === 'success') {
if($("#global_flag_validation_failed").length === 0){
$("#dialog_id").dialog("close");
}
}
}
For more info take a look over here: How to find indication of a Validation error (required=“true”) while doing ajax command

Related

jquery validation invalidHandler

I am using jquery validation for my form and i have set an invalidHandler that show an error on the top of form and scroll to that message.
I am trying to hide that message when field validation is success but i can not find anything in validate() option that will help me.
(not when user click submit.For example if i have one textbox on the form and click submit i display the message, when the user write something to textbox and it pass the validation i want to hide the message without the user click submit)
Maybe i can count the number of errors on success but i dont know how.
Thanks
if you give your error at the top of your form an id of 'foo',
<div id="foo">error here</div>
and set the errorContainer option, then when the form is valid again the element #foo will disappear
$("#myform").validate(
{
errorContainer: "#foo"
}
});
note the element #foo must be within the form

Further continuation of pressing command button twice

Referencing this question because the problem is identical to mine, but I don't think the solution is usable in my situation.
continuation of pressing button twice
I have a workflow with a series of forms that need to be filled out and submitted, and I would like to display a modal overlay after the user clicks the "next" button. In order to show this overlay, I need to make the command button use ajax. This leads to the undesired behavior as described in the linked issue.
The solution for the linked issue seemed to be "don't use Ajax for navigation", but I think in my case I may have to in order to show this waiting dialogue. Is there any other way to guarantee that the view state on the following page will be updated correctly, so that when I continue navigating I do not need to hit the button twice?
I am using Primefaces 3.3.1.
<p:commandButton id="nextCommand" value="Next"
action="#{backingBean.processInputAndDetermineOutcome}"
onclick="waiter.show();" oncomplete="waiter.hide();">
<f:param name="validate" value="true" />
</p:commandButton>
The "validate" param is a flag I am using in a custom BeanValidator so that my "Back" button can submit the form and update the model without processing any of the valdations. I don't think that should have any impact on this question, but I thought I should mention what other pieces are involved in this commandButton.
Your best bet is to navigate with a redirect.
public String processInputAndDetermineOutcome() {
// ...
return outcome + "?faces-redirect=true";
}
Otherwise, for sure if you're actually observing the problem in IE browser only and not in other, more sane, browsers, then you may want to try the PrimeFaces-specific JavaScript fix as proposed here: JSF Language switcher and ajax update.
Or, if you're actually observing the problem in <f:ajax> and not in <p:ajax>, then try the JSF-specific JavaScript fix as proposed here: h:commandButton/h:commandLink does not work on first click, works only on second click.

MVC3 Restricting validation to the submitted form only

I have a view with two forms on it. Each form is marked like this:
Html.BeginForm("Details", "Forum", new { page = Model.PagedList.CurrentPage }, FormMethod.Post)
And each form has its own input button (type="button").
My problem is, when I click the button for one of the forms, the validation errors for the other form are added to the ModelState, so ModelState.IsValid == false.
How can I limit the scope of the validation to just the form I am clicking a button on?
Use Shared View instead to control your validations on different form.

JSF 2.0 values not being submitted

I’m struggling to get my bean to update with the new page values. I have two submit buttons on my page and I toggle which one displays based on a Boolean value for what mode my page is in. When my page is in update only (no validation) I show the submit button that has immediate=”true”. When the page is in process mode (validate) I show the submit button that does not have immediate=”true”.
The problem I’m running into is when I am in update mode (no validation) the values in the input fields are not being set in the bean. All I want to do when in this mode is save the page as is and exit. No validation is needed because the information on that page is not ready to process or “really use” if you will. That said, if I have my page in process mode (validate) then everything works as intended. Values are submitted and saved.
I’m not posting any code yet as there is nothing special about what I’m trying to do. I simply have a value binding that points to simple getter / setter. My bean is in #ViewScope.
I’ve tried using the examples by BalusC in his excellent blogspot post: debug-jsf-lifecycle.
Putting immediate=”true” on the input fields has no affect when clicking on the submit button with immediate="true". All and all though, the way I understand it is immediate=”true” on the UICommand is what tells the application to skip validation or not. Putting it on the input fields simply makes validation happen sooner. Am I missing something?
Any ideas? Any and all help with this is most appreciated!
App specifics:
JSF 2.0.3
Tomcat 6.0.14
The immediate="true" is not intented to disable validation. It's intented to either prioritize validation or to skip processing of the input altogether. See also the summary at the bottom of the article.
You need to disable validation by setting required="false", or <f:validator disabled="true">. Here's an example which assumes that you've a boolean process property which represents the form's state:
<h:inputText value="#{bean.value1}" required="#{bean.process}" />
<h:inputText value="#{bean.value2}" required="#{bean.process}">
<f:validator validatorId="someValidatorId" disabled="#{!bean.process}" />
</h:inputText>
...
This way the fields aren't required and won't be validated when process evaluates false.

JSF 2.0 Ajax Problem

I have some <h:inputText> on my form and two <h:commandButton>s, one commandbutton submits the form in a classic manner and the other one has a <f:ajax>, how can I prevent the form from submitting when the user presses Enter key in one of my inputs which triggers the second button?
If you don't have textareas in your form, just add the following to the <h:form>.
<h:form onkeypress="return event.keyCode != 13">
The Enter key has the key code 13, so the above returns false to the form whenever it is been pressed, so the default action won't take place anymore.
However, if you have textareas in your form (<h:inputTextArea> and on), where you'd like to have the Enter key to function as usual, then you need to put the onkeypress attribute in all non-textarea input fields instead. You can use JS/jQuery for this to minimize code duplication.

Resources