Thursday, 12 October 2017

Using Smoke Form Validation And Components for Bootstrap in XPages Part 3 - Easy, Simple and Safer Form Validation


In my prevoius blog posts about Smoke, Using Smoke Form Validation And Components for Bootstrap in XPages Part 1 - Alerts and Using Smoke Form Validation And Components for Bootstrap in XPages Part 2 - Confirmation, I described how you can use the Smoke Components Alert and Conformation in an XPages application. In this blog post the first part of how you can use the Smoke Form Validation in an XPages application.

In this blog post the validation of Empty-, Alphanumeric- and Number Fields are described. To validate a form the function smkValidate() is used. The field types supported so far are text, textarea, email, password, select, radio, checkbox, number, color, date, datetime, time, month, week, tel, url, search and range. It is necessary that the input (field) to validate has the form-control class and it is inside a div with the form-group class. If the input has a disabled attribute, it will be not validated. To validate a field that is mandatory, you only have to add the required attribute. To validate a field that accepts only numbers and letters, the field must be of type text, add the data-smk-type attribute and within this the alphanumeric property. To validate that a field only accepts numbers, the field must be of type text or type number, if it is of type text add the data-smk-type attribute and within this, the number attribute.
For more information about adding the JS and CSS files and adding the x$ jQuery selector for XPages see my prevoius blog posts about the Smoke plugin in XPages.

For using Smoke Validation the x$ jQuery selector for XPages script can be made up as follows. In this example I use a few standard options.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button1}" ).bind("click",function(){if ($('#smokevalidation').smkValidate()) {
// Code here
$.smkAlert({
text: 'Validate!',
type: 'success'
});
}
});
});
]]></xp:this.value>
</xp:scriptBlock>

Final Result
The final result is an easy, simple, and customizable form validation in combination with the Smoke Alert Component.


Code XPage
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:this.data>
<xp:dominoDocument var="document1" formName="Smoke"></xp:dominoDocument>
</xp:this.data>
<xp:this.resources>
<xp:script src="/jQuerySelector.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type="text/javascript" src="smoke/js/smoke.js"></script>
<link rel="stylesheet" href="smoke/css/smoke.css" />
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button1}" ).bind("click",function(){if ($('#smokevalidation').smkValidate()) {
// Code here
$.smkAlert({
text: 'Validate!',
type: 'success'
});
}
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<div class="form-horizontal" id="smokevalidation" data-smk-icon="glyphicon-remove-sign">
<legend>Smoke Form Validation</legend>
<div class="form-group">
<xp:label value="Text area" id="label2" for="inputTextarea1" styleClass="control-label col-sm-2">
</xp:label>
<div class="col-sm-10">
<xp:inputTextarea id="inputTextarea1">
<xp:this.attrs>
<xp:attr name="required" value="required"></xp:attr>
<xp:attr name="class" value="form-control"></xp:attr>
</xp:this.attrs>
</xp:inputTextarea>
</div>
</div>
<div class="form-group">
<xp:label value="Alphanumeric" id="label1" for="inputText1" styleClass="control-label col-sm-2">
</xp:label>
<div class="col-sm-10">
<xp:inputText id="inputText1">
<xp:this.attrs>
<xp:attr name="required" value="required"></xp:attr>
<xp:attr name="class" value="form-control"></xp:attr>
<xp:attr name="data-smk-type" value="alphanumeric"></xp:attr>
</xp:this.attrs>
</xp:inputText>
</div>
</div>
<div class="form-group">
<xp:label value="Number" id="label3" for="inputText2" styleClass="control-label col-sm-2">
</xp:label>
<div class="col-sm-10">
<xp:inputText id="inputText2">
<xp:this.attrs>
<xp:attr name="required"value="required"></xp: attr>
<xp:attr name="class" value="form-control"></xp:attr>
<xp:attr name="data-smk-type" value="number"></xp:attr>
</xp:this.attrs>
</xp:inputText>
</div>
</div>
</div>
<xp:button id="button1" value="Validate"></xp:button>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

More information: Smoke Form Validation

No comments:

Post a Comment