Validation

Provide valuable, actionable feedback to your users with HTML5 form validation–available in all our supported browsers.

How To

Step 1: Include LambdaEx Framework in Logi Info Application. Include LambdaEx Framework in Logi Info Application.

How it works

Here’s how form validation works with Bootstrap:

HTML form validation is applied via CSS’s two pseudo-classes, :invalid and :valid. It applies to <input>, <select>, and <textarea> elements.
Bootstrap scopes the :invalid and :valid styles to parent .was-validated class, usually applied to the <form>. Otherwise, any required field without a value shows up as invalid on page load. This way, you may choose when to activate them (typically after form submission is attempted).
As a fallback, .is-invalid and .is-valid classes may be used instead of the pseudo-classes for server side validation. They do not require a .was-validated parent class.
Due to constraints in how CSS works, we cannot (at present) apply styles to a <label> that comes before a form control in the DOM without the help of custom JavaScript.
Feedback messages may utilize the browser defaults (different for each browser, and unstylable via CSS) or our custom feedback styles with additional HTML and CSS.
You may provide custom validity messages with setCustomValidity in JavaScript.

Default

Example

First name

Please provide a valid first name.

Last name

Please provide a valid last name.

Email

Please provide a valid email.

Text Area

<Division Class="novalidate" HtmlDiv="True" ID="frmValidate">
  <Division Class="form-group" HtmlDiv="True">
    <InputText Caption="First name" Class="form-control required" ID="inpFirst" NoWrap="True" Placeholder="First name" />
    <Label Caption="Please provide a valid first name." Class="invalid-feedback" HtmlTag="Div" />
  </Division>
  <Division Class="form-group" HtmlDiv="True">
    <InputText Caption="Last name" Class="form-control required" ID="inpLast" Placeholder="Last name" />
    <Label Caption="Please provide a valid last name." Class="invalid-feedback" HtmlTag="Div" />
  </Division>
  <Division Class="form-group" HtmlDiv="True">
    <InputEmail Caption="Email" Class="form-control required" ID="InputEmail" Placeholder="[email protected]" />
    <Label Caption="Please provide a valid email." Class="invalid-feedback" HtmlTag="Div" />
  </Division>
  <Division Class="form-group" HtmlDiv="True" ID="dvTextArea">
    <InputTextArea Caption="Text Area" Class="form-control" ID="inpTextArea" InputRows="3" />
  </Division>
  <IncludeScript IncludedScript="$('.novalidate').attr('novalidate','novalidate').removeClass('novalidate');" />
  <IncludeHtml Html="&lt;button class=&quot;btn btn-primary&quot; type=&quot;submit&quot;&gt;Submit form&lt;/button&gt;" />
</Division>

<InputText Class="form-control" ID="inpText" Placeholder="This is a placeholder!" Caption="Input Text" /><InputEmail Class="form-control" ID="InputEmail" Placeholder="[email protected]" Caption="Email" /><InputTextArea Class="form-control" ID="inpTextArea" InputRows="3" Caption="Text Area" />

Was Validated

Example

Set .required class as validation field by adding $('.required').attr('required','required').unwrap().removeClass('required');.

First name

Please provide a valid first name.

Last name

Please provide a valid last name.

Email

Please provide a valid email.

Text Area

<Division Class="novalidate" HtmlDiv="True" ID="frmValidation1">
  <Division Class="form-group" HtmlDiv="True">
    <InputText Caption="First name" Class="form-control required" DefaultValue="John" ID="inpFirst" NoWrap="True" Placeholder="First name" />
    <Label Caption="Please provide a valid first name." Class="invalid-feedback" HtmlTag="Div" />
  </Division>
  <Division Class="form-group" HtmlDiv="True">
    <InputText Caption="Last name" Class="form-control required" DefaultValue="Doe" ID="inpLast" Placeholder="Last name" />
    <Label Caption="Please provide a valid last name." Class="invalid-feedback" HtmlTag="Div" />
  </Division>
  <Division Class="form-group" HtmlDiv="True">
    <InputEmail Caption="Email" Class="form-control required" ID="InputEmail" Placeholder="[email protected]" />
    <Label Caption="Please provide a valid email." Class="invalid-feedback" HtmlTag="Div" />
  </Division>
  <Division Class="form-group" HtmlDiv="True" ID="dvTextArea">
    <InputTextArea Caption="Text Area" Class="form-control" ID="inpTextArea" InputRows="3" />
  </Division>
  <Button Caption="Submit" ID="btnSubmit">
    <EventHandler DhtmlEvent="onclick">
      <Action Javascript="document.getElementById('frmValidation1').classList.add('was-validated');" Type="Javascript" />
    </EventHandler>
  </Button>
</Division>

/*START INCLUDE SCRIPT ELEMENT...*/
$('.required').attr('required','required').unwrap().removeClass('required');
$('.novalidate').attr('novalidate','novalidate').removeClass('novalidate');
/*...END INCLUDE SCRIPT*/

<Division Class="novalidate" HtmlDiv="True" ID="frmValidation1"> <Division Class="form-group" HtmlDiv="True"> <InputText Caption="First name" Class="form-control required" DefaultValue="John" ID="inpFirst" NoWrap="True" Placeholder="First name" /> <Label Caption="Please provide a valid first name." Class="invalid-feedback" HtmlTag="Div" /> </Division> <Division Class="form-group" HtmlDiv="True"> <InputText Caption="Last name" Class="form-control required" DefaultValue="Doe" ID="inpLast" Placeholder="Last name" /> <Label Caption="Please provide a valid last name." Class="invalid-feedback" HtmlTag="Div" /> </Division> <Division Class="form-group" HtmlDiv="True"> <InputEmail Caption="Email" Class="form-control required" ID="InputEmail" Placeholder="[email protected]" /> <Label Caption="Please provide a valid email." Class="invalid-feedback" HtmlTag="Div" /> </Division> <Division Class="form-group" HtmlDiv="True" ID="dvTextArea"> <InputTextArea Caption="Text Area" Class="form-control" ID="inpTextArea" InputRows="3" /> </Division> <Button Caption="Submit" ID="btnSubmit"> <EventHandler DhtmlEvent="onclick"> <Action Javascript="document.getElementById('frmValidation1').classList.add('was-validated');" Type="Javascript" /> </EventHandler> </Button> <IncludeScript IncludedScript="$('.required').attr('required','required').unwrap().removeClass('required');
$('.novalidate').attr('novalidate','novalidate').removeClass('novalidate');" /> </Division>