The document provides instructions on how to add custom CSS and JavaScript validation to a form built with the One App Cloud form designer. It explains how to access the "Embed CSS" and "Embed JavaScript" options in form settings to override styles and add validation code. Specific examples are given for styling different form elements and fields, and guidelines for writing custom validation JavaScript, including how to access field values.

1. One
App
Cloud
–
How
to
Guide
How to use custom CSS in a form?
The form designer “Embed CSS” option provides web developers the ability
to override css styles and add custom styles to a form. To change the
styles follow the steps below:
Go to edit form and then go to form settings in left panel of form designer.
Once
your
form
is
ready
with
the
controls
save
it
and
apply
CSS.
You
will
see
the
changes
reflect
at
run
time.
1. Applying
style
on
whole
form
body:
.formBodyStyle{
font-­‐size:11px;
font-­‐family:
verdana;
}
http://www.oneappcloud.com

2. One
App
Cloud
–
How
to
Guide
2. Applying
style
on
form
heading
and
description:
.formHeadingStyle
<<Heading
selected
in
settings
i.e.
h1/h2/h3>>{
color:
red;
}
.formDescriptionStyle{
font-­‐weight:
bold;
}
3. Applying
style
on
input
fields
like
text
field,
dropdowns
and
other
input
field
for
radio
and
checkbox:
.uniForm
select.textInput,
.uniForm
input.textInput,
#<<field’s
uniqueId>>othertext{
border-­‐radius:0;
box-­‐shadow:0
0
0
0;
width:200px;
}
4. Applying
style
on
controls
to
make
them
look
different
in
whole
form:
#<<field’s
uniqueId>>ControlHolder
.textInput{
width:300px;
}
5. Applying
style
on
composite
controls
like
address,
name
and
date
when
not
showing
calendar:
#<<field’s
uniqueId>>ControlHolder
input[type='text']{
box-­‐shadow:0
0
0
0;
border-­‐radius:0;
}
http://www.oneappcloud.com

3. One
App
Cloud
–
How
to
Guide
How to provide custom JavaScript validation for a form ?
In
designer
view,
in
form
settings
tab
you
can
see
Embed
JavaScript
block.
In
this
you
are
given
a
function
beforeSubmit().
You
have
to
write
you
validation
code
in
this
function.
If
this
function
returns
false,
the
form
is
not
submitted.
And
if
the
function
is
not
declared,
form
will
be
submitted
normally.
If
you
are
getting
a
value
from
a
field,
its
will
be
a
string.
For
numeric
and
date
type
validations,
you
will
have
to
convert
it
accordingly
for
validation
purposes.
Below
are
the
guidelines
on
how
to
write
the
validation
code:
Getting
value
of
a
field
like
Single
Line
Text,
Multi
Line
Text,
Number,
Date
and
Select:
$(‘#<<field’s
uniqueId>>’).val()
Getting
value
of
composite
fields
like
Address
and
Name:
Address
Line1:
$(‘#<<field’s
uniqueId>>_line1’).val()
Address
Line2:
$(‘#<<field’s
uniqueId>>_line2’).val()
Address
City:
$(‘#<<field’s
uniqueId>>_city’).val()
Address
State:
$(‘#<<field’s
uniqueId>>_state’).val()
Address
Zip:
$(‘#<<field’s
uniqueId>>_zip’).val()
Address
Country:
$(‘#<<field’s
uniqueId>>_country’).val()
Name
Prefix:
$(‘#<<field’s
uniqueId>>pre’).val()
Name
First
Name:
$(‘#<<field’s
uniqueId>>fn’).val()
http://www.oneappcloud.com

4. One
App
Cloud
–
How
to
Guide
Name
Middle
Name:
$(‘#<<field’s
uniqueId>>mn’).val()
Name
Last
Name:
$(‘#<<field’s
uniqueId>>ln).val()
Validating
checkbox
and
radio
buttons:
Getting
checkbox/radio
button:
$(‘#<<field’s
uniqueId>><<index
in
current
control
starting
from
0>>).attr(‘checked’)
It
will
return
true
if
the
checkbox/radio
button
is
checked
otherwise
will
return
false;
For
other
value
in
checkbox/radio
button:
$(‘#<<field’s
uniqueId>>othertext).val()
Validations
on
date’s
time
values:
$(‘.hours’,$(‘#<<field’s
uniqueId>>ControlHolder’)).val()
will
give
you
hours’
value
$(‘.minutes’,$(‘#<<field’s
uniqueId>>
ControlHolder’)).val()
will
give
you
minutes’
value
$(‘.meridian’,$(‘#<<field’s
uniqueId>>
ControlHolder’)).val()
will
give
you
meridian’
value
Here
is
an
example
of
a
complete
implementation
of
a
custom
JavaScript
validation
code
for
a
form
–
function
beforeSubmit(){
//code
for
validation
before
save
if($('#field1356404214494').val()
<
$('#field1356404254141').val()){
alert('Leave
request
can
not
be
more
than
leave
leave
balance
available);
return
false;
}
return
true;}
http://www.oneappcloud.com