onChange event does not fire if there is field level validation - validation

Below is the source of a very simplified XPage. It has a radio button group with two choices and an onchange event that sets viewScope.vsCompanies depending on the value selected. Then there is a field called Title that I have made Required. If I click on the radio button it changes from Contract to Lease and back but the onchange event never fires. Instead I get a warning that the Title is required. I only want the validation to fire when the document is being submitted so the onchange works. Do I have to make every one of the validations conditional on the submit being pressed, which seems like a lot of additional work. I could set a viewScope when the submit button is pressed and make it only required if that viewScope is true.
Sorry missed adding the code ps clientsideValidation is disabled
<xp:this.data>
<xp:dominoDocument var="CLDoc"
databaseName="Client Apps\LGI\XPages\LGIContracts-Leases.nsf"
formName="frmCL">
</xp:dominoDocument>
</xp:this.data>
<xp:this.properties>
<xp:parameter name="xsp.client.validation" value="false" />
</xp:this.properties>
<xp:br></xp:br>
<xp:messages id="messages1"></xp:messages>
<xp:radioGroup id="radioGroup1" value="#{CLDoc.Type}">
<xp:selectItem itemLabel="Contract"></xp:selectItem>
<xp:selectItem itemLabel="Lease"></xp:selectItem>
<xp:eventHandler event="onchange" submit="true"
refreshMode="partial" refreshId="comboBox1">
<xp:this.action><![CDATA[#{javascript:if (CLDoc.getValue("Type") == "Contract"){
viewScope.vsCompanies = ["A","B","C"];
return;
break;
}else{
viewScope.vsCompanies = ["X","Y","Z"];
return;
break;
}}]]></xp:this.action>
</xp:eventHandler>
</xp:radioGroup>
Company
<xp:br></xp:br>
<xp:comboBox id="comboBox1" value="#{CLDoc.Company}">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:viewScope.vsCompanies}]]></xp:this.value>
</xp:selectItems>
</xp:comboBox>
<xp:br></xp:br>
Title
<xp:br></xp:br>
<xp:inputText id="inputText1" style="width:392.0px" value="#{CLDoc.Title}"
required="true">
<xp:this.validators>
<xp:validateRequired message="Title is required"></xp:validateRequired>
</xp:this.validators>
</xp:inputText>

I believe if you go to the Events you are able to disable validators for that event.
[edit]
I found a duplicate question here. xpages validation on field having onChange script
Looks like the event handler has the following parameter
disableValidators="true"

Related

Xpages radio button validation by groupName?

I have radio buttons in a table with the same groupName.
Is there a relatively simple way to validate this field upon submitting the form without using CCJS?
<xp:td>
<xp:radio id="radio120" groupName="R_1" value="#{document1.R_1}" selectedValue="1"></xp:radio>
</xp:td>
<xp:td>
<xp:radio id="radio120" groupName="R_1" value="#{document1.R_1}" selectedValue="2"></xp:radio>
</xp:td>
With regular Radio Button Group controls, I use validateRequired with an errorMessage control to display a message.
<xp:radioGroup styleClass="A2" style="border:0px;" value="#{document1.Necktie}" layout="pageDirection" id="Necktie">
<xp:this.validators>
<xp:validateRequired message="REQUIRED!"></xp:validateRequired>
</xp:this.validators>
<xp:selectItem itemLabel="No" id="selectItem13"></xp:selectItem>
<xp:selectItem itemLabel="Yes" id="selectItem14"></xp:selectItem>
</xp:radioGroup>
<xp:message id="message10" for="Necktie"></xp:message>
Use the data source document1 on server side to find out if one of your radio buttons was selected.
Test for document1.getItemValueString("R_1"). If it is empty set an error message and return false. Otherwise save the document.
<xp:button value="Save" id="button1">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:
if (document1.getItemValueString("R_1") == "") {
facesContext.addMessage(null,
new javax.faces.application.FacesMessage("select a radio"));
return false;
}
document1.save();
}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:messages id="messages1" />
Fair enough... In that case, outside of doing something with CSJS, I'm not too sure....
Not sure if this is going to help, but have a look at this post by Marky Roden:
https://xomino.com/2012/03/10/checking-xpages-radio-buttons-have-been-selected-with-jquery/
I haven't been doing any development work for 4/5 weeks as year end comes up so my brain isnt really working like it should.....

Xpages conditional validation: make a field required only if report is being submitted as final

Doing server-side Xpages conditional validation....
I want the follow validation to kick in only if the Report.Status field = 'Final'. (The users are allowed to submit the report as draft and come back and finish it later, when they submit as draft we don't want to make the fields required.)
How would I go about this?
<xp:inputTextarea style="width:75%" value="#{Report.Agenda}" id="Agenda">
<xp:this.validators>
<xp:validateRequired
message="Question 1 can't be blank">
</xp:validateRequired><!-- (1) -->
</xp:this.validators>
</xp:inputTextarea>
Tried this, didn't work, was still required even if Status field not set to final :{
<xp:inputTextarea style="width:75%" value="#{Report.Agenda}" id="Agenda" defaultValue="5 year agenda">
<xp:this.validators>
<xp:validateRequired message="Question 1 can't be blank"></xp:validateRequired><!-- (1) -->
<xp:validateExpression message="Question 1 can't be blank">
<xp:this.expression><![CDATA[#{javascript:
if (Report.getItemValueString('Status')!='Final') {
return true;
}
else {
return false;
}
}]]></xp:this.expression>
</xp:validateExpression>
</xp:this.validators>
</xp:inputTextarea>
Disable validation for whole XPage in submit button with property disableValidators if field "Status" is not "Final":
var status = getComponent('comboBoxStatus').getSubmittedValue();
if (!status || status !== 'Final') {return true;} return false;
The first code line determines the current value of Status control (e.g. combo box) at validation phase (otherwise it is null). The second line returns a false (= don't disable validators) if Status control is "Final" and otherwise true (= ignore all validators).
This way all validators in XPage get executed only if Status is "Final".
This is a working example:
<xp:comboBox id="comboBoxStatus" value="#{Report.Status}">
<xp:selectItem itemLabel="Start"></xp:selectItem>
<xp:selectItem itemLabel="Final"></xp:selectItem>
</xp:comboBox>
<xp:br />
<xp:inputTextarea
id="inputTextarea1"
value="#{Report.Agenda}"
disableClientSideValidation="true">
<xp:this.validators>
<xp:validateRequired message="Question 1 can't be blank" />
</xp:this.validators>
</xp:inputTextarea>
<xp:br />
<xp:messages
id="messages1"></xp:messages>
<xp:br />
<xp:button
value="Save"
id="button1">
<xp:eventHandler
event="onclick"
submit="true"
refreshMode="complete"
immediate="false"
save="true"
disableValidators="#{javascript:
var status = getComponent('comboBoxStatus').getSubmittedValue();
if (!status || status !== 'Final') {return true;} return false;}">
</xp:eventHandler>
</xp:button>
Please notice that client side validation is disabled with disableClientSideValidation="true"
In case you want to disable validation only for certain elements in XPage then set property "disableValidators" only at those elements.

customValidator without requiredValidator?

I am struggling with a custom validator for a text field. It seems that the custom validation only works AFTER the required validation is executed. This means that a field without a requiredValidator cannot be custom validated - is that true?
What I want to do:
I have a text field. The value is only required if a specific value in another field is selected (here this is a checkbox group). It is a dependant validation. My custom validator works fine until the text field is required - but this should not be the case.
checkbox does not have the specific value -> text field can be blank
checkbox holds the value -> text field must have a value.
Any ideas?
<xp:inputText id="inputText1" disableClientSideValidation="true">
</xp:inputText>
<xp:inputText id="inputText2" disableClientSideValidation="true">
<xp:this.validators>
<xp:customValidator message="err">
<xp:this.validate><![CDATA[#{javascript:if(getComponentValue("inputText1").length>0 && getComponentValue("inputText2").length==0) postValidationError(this, "foo")}]]></xp:this.validate>
</xp:customValidator>
</xp:this.validators>
</xp:inputText>
Where getComponentValue is a method to receive either the value with getValue or getSubmittedValue from the component and postValidationError is a method to add a faces message.
EDIT & FINAL ANSWER
Conclusion and a sample here: http://mardou.dyndns.org/Privat/osnippets.nsf/id/OBUE-95BLK4
The required validator is always the first validator which will be executed during the validation. That means that the answer to the first part of your question is YES.
But this does not mean that you need a required validator to use a custom validator: This part of your question has to be answered with a clear NO.
The required validator is a special kind of "hack", because a validator is only executed if your component receives a new value (aka not blank).
I am not sure why you have a problem with a custom validator - in the scenario you are describing you are just using a required validator...
EDIT:
Just "turn your validators around": Add the custom validator from inputText2 to inputText1 and it should work.
EDIT 2:
<xp:inputText id="inputText1" disableClientSideValidation="true">
<xp:this.validators>
<xp:customValidator message="err">
<xp:this.validate><![CDATA[#{javascript:
var val = getComponent("inputText2").getSubmittedValue();
if( val.equals("") == true )
return false;
null}]]>
</xp:this.validate>
</xp:customValidator>
</xp:this.validators>
</xp:inputText>
<xp:inputText id="inputText2" disableClientSideValidation="true" />

Multiple onClick events

I have a JSF page, a drop down where values are getting fetched from service.
Default is "Select from Drop Down" and a datePicker and a submit button.
I need to apply JS/AJAX validation here.
If a user clicks on Submit button without chosing any value from the drop down and the date. It should first diplay a message,
1) If none chosen, first show a message - Please select a value from drop down.
2) if the value is selected from the drop down and date has not been selected It should display a message " select a date".
3) if the date is selected and value is not selected from the drop down It should display a message " select a value from the drop down".
Both validation should be done on a single click on submit button.
Currently it's just checking if date is not selected. onclick event code is mentioned below.
Drop Down
<h:selectOneMenu id="valueList" value="#bean.values">
<f:selectItem itemValue="Select Action" itemLabel="Select Action" />
<f:selectItems value="#{sampleService.sampleMethod}"
var="SampleVar" itemValue="#{SampleVar}"
itemLabel="#{SampleVar}">
</f:selectItems>
</h:selectOneMenu>
Submit button
<ui:define name="actions">
----h:inputHidden id="getAllDates"
value="#{serviceMethod.getAllDates}"-----
<h:commandButton styleClass="inputbutton" valuGenerate" id="export"
action="#{generate.someReport}" onclick="saveDate(); />
</ui:define>
Passing all selected dates in hidden.
OnClick event this js function is written in another file.
onclick="saveDate();"
function saveDate() {
var dates = $('#selectDates').datepick('getDate');
var datesValue = '';
if(dates==null || dates=="undefined"){
alert("Select Dates");
return false;
}
if(dates!=null){
// store in an array and return true
}
Currently page is getting refreshed on every click on Submit button and alert message gets displayed only for date.
Can anybody help me in applying ajax call on submit button and displaying validation messages?
You're thinking too much in the JavaScript direction. Use JSF provided facilities. Use the required attribute to specify required inputs. Use requiredMessage attribute to specify the validation message. Use <h:message> to display the validation messages. Use <f:ajax> to submit (and validate) data by ajax.
So, this should do:
<h:selectOneMenu id="action" binding="#{action}" value="#{bean.action}" required="true" requiredMessage="Please select action">
<f:selectItem itemValue="#{null}" itemLabel="Select Action" />
<f:selectItems value="#{bean.actions}" />
<f:ajax execute="#this" render="actionMessage date" />
</h:selectOneMenu>
<h:message id="actionMessage" for="action" />
<x:yourDatePickerComponent id="date" value="#{bean.date}" required="#{not empty action.value}" requiredMessage="Please select date">
<f:ajax execute="#this" render="dateMessage" />
</x:yourDatePickerComponent>
<h:message id="dateMessage" for="date" />
(I have no idea what component you're using as date picker, just replace x:yourDatePickerComponent accordingly)
you don't need ajax :
function save() {
var validated = true;
var dates = $('#selectDates').datepick('getDate');
var datesValue = '';
var message;
if(dates==null || dates=="undefined"){
alert("Select Dates");
message = "message1";
validated = false;
return false;
}
if( $('#idOfDropDown').val() != ''){
message = "message2";
validated = false;
return false;
}
if(!validated){
// preveent thr form from submitting
return false;
}
}

Setting SqlDataSource SelectParameters from form text box

I am trying to use a text box input as a SqlParameter but it only goes into DataSelecting when the page first loads. Not after the from is submitted.
Here is the code on the aspx page.
protected void DataSelecting(object sender, SqlDataSourceSelectingEventArgs e)
{
e.Command.Parameters["#zip"].Value = ZipBox.Text;
}
"
SelectCommand="SELECT Name FROM Names WHERE (ZipCode = #zip)"
OnSelecting="DataSelecting">
SelectParameters>
parameter Name="zip" DefaultValue="1" />
SelectParameters>
SqlDataSource>
FORM
id="ZipSearch" runat="server" action="Default.aspx" method="post">
TextBox ID="ZipBox" runat="server" />
Button id="btnSubmit" Text="Submit" runat="server" />
FORM
Thanks for your help,
Matt
You need to place that code in the button click event. Selecting event is for different purpose.
Old reply (Before OP's comment) :
What do you have in button click event?
The Selecting event would fire before your select command is executed. Hence if your button click event is firing any command, the Selecting event won't be fired.

Resources