Please be patient with me - 1 day user of JQWidget - Please direct me. - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: field, form, id, Input, jqxvalidator, validate, validator

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 10 years, 10 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Please be patient with me – 1 day user of JQWidget – Please direct me. Posts
June 29, 2014 at 2:26 am Please be patient with me – 1 day user of JQWidget – Please direct me. #56523

Alexlifeson
Participant

Im Alex – new to JQWidget, just installed 1 day ago, worked with it today. Some general Modification or Building a validation would be appreciated.

Attached is my code illustrating my needs. The upper form is a modifiey jqwidget form and the lower is a simple working form. I am trying to transfrom the working form into the jqwidget form, (dont know if there is more direct approach)

Im having difficult with eliminating the birth date in the jq form, any modification brakes the validation or the form layout.

Finally, should I get the jq form attributes correct, I will need to name the inputs, and id’s correctly. Is this correct?

Thanks……… here is code, I modified / commented out the default jqzvalidator / defaultfunctionally.hmt – This is the upper code.
The code under this is a very simple working form. Hope this makes sense, any direction will be great. Keep in mind, im very new to all this!

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta name=”keywords” content=”jqxValidator, jQuery Validation, jQWidgets, Default Functionality” />
<meta name=”description” content=”jqxValidator is a plug-in which enables you to validate html forms.
It has a set of built-in rules (required inputs, e-mail, SSN, ZIP, max value, min value, interval etc.)
for validating the user input. You can also write a custom rule which will fit best to your requirements.” />
<title id=’Description’>This demo demonstrates the basic functionality of the jqxValidator plugin.</title>
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”../../scripts/jquery-1.10.2.min.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxexpander.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxvalidator.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/globalization/globalize.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcalendar.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxdatetimeinput.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxmaskedinput.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxinput.js”></script>
<script type=”text/javascript” src=”../../scripts/demos.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
$(“#register”).jqxExpander({ toggleMode: ‘none’, width: ‘300px’, showArrow: false });
<!–$(‘#sendButton’).jqxButton({ width: 60, height: 25 });–>
<!– $(‘#acceptInput’).jqxCheckBox({ width: 130 });–>

$(‘#sendButton’).on(‘click’, function () {
$(‘#testForm’).jqxValidator(‘validate’);
});
<!–$(“#ssnInput”).jqxMaskedInput({ mask: ‘###-##-####’, width: 150, height: 22 });–>
$(“#phoneInput”).jqxMaskedInput({ mask: ‘(###)###-####’, width: 150, height: 22 });
<!–$(“#zipInput”).jqxMaskedInput({ mask: ‘#####-####’, width: 150, height: 22 });–>

$(‘.text-input’).jqxInput({ });

$(‘#birthInput’).jqxDateTimeInput({ width: 150, height: 22, value: new Date(2014, 4, 1) });

// initialize validator.
$(‘#testForm’).jqxValidator({
rules: [
<!– { input: ‘#userInput’, message: ‘Username is required!’, action: ‘keyup, blur’, rule: ‘required’ },–>
<!– { input: ‘#userInput’, message: ‘Your username must be between 3 and 12 characters!’, action: ‘keyup, blur’, rule: ‘length=3,12’ },–>
{ input: ‘#realNameInput’, message: ‘Name is required!’, action: ‘keyup, blur’, rule: ‘required’ },
{ input: ‘#realNameInput’, message: ‘Name must contain only letters!’, action: ‘keyup’, rule: ‘notNumber’ },
{ input: ‘#realNameInput’, message: ‘Name must be between 3 and 12 characters!’, action: ‘keyup’, rule: ‘length=3,12’ },

{ input: ‘#countyInput’, message: ‘County equired!’, action: ‘keyup, blur’, rule: ‘required’ },
{ input: ‘#countyInput’, message: ‘County contain only letters!’, action: ‘keyup’, rule: ‘notNumber’ },
{ input: ‘#countyInput’, message: ‘County must be between 3 and 12 characters!’, action: ‘keyup’, rule: ‘length=3,12’ },
{
input: ‘#birthInput’, message: ‘Your birth date must be between 1/1/1900 and 1/1/2015.’, action: ‘valuechanged’, rule: function (input, commit) {
var date = $(‘#birthInput’).jqxDateTimeInput(‘value’);
var result = date.getFullYear() >= 1900 && date.getFullYear() <= 2014;
// call commit with false, when you are doing server validation and you want to display a validation error on this field.
return result;
}
},
<!–{ input: ‘#passwordInput’, message: ‘Password is required!’, action: ‘keyup, blur’, rule: ‘required’ },–>
<!–{ input: ‘#passwordInput’, message: ‘Your password must be between 4 and 12 characters!’, action: ‘keyup, blur’, rule: ‘length=4,12’ },–>
<!– { input: ‘#passwordConfirmInput’, message: ‘Password is required!’, action: ‘keyup, blur’, rule: ‘required’ },–>
{
input: ‘#passwordConfirmInput’, message: ‘Passwords doesn\’t match!’, action: ‘keyup, focus’, rule: function (input, commit) {
// call commit with false, when you are doing server validation and you want to display a validation error on this field.
if (input.val() === $(‘#passwordInput’).val()) {
return true;
}
return false;
}
},
{ input: ‘#emailInput’, message: ‘E-mail is required!’, action: ‘keyup, blur’, rule: ‘required’ },
{ input: ‘#emailInput’, message: ‘Invalid e-mail!’, action: ‘keyup’, rule: ’email’ },
<!–{ input: ‘#ssnInput’, message: ‘Invalid SSN!’, action: ‘valuechanged, blur’, rule: ‘ssn’ },–>
{ input: ‘#phoneInput’, message: ‘Invalid phone number!’, action: ‘valuechanged, blur’, rule: ‘phone’ },
<!– { input: ‘#zipInput’, message: ‘Invalid zip code!’, action: ‘valuechanged, blur’, rule: ‘zipCode’ },–>
{ input: ‘#acceptInput’, message: ‘You have to accept the terms’, action: ‘change’, rule: ‘required’, position: ‘right:0,0′ }]
});
});
</script>
<style type=”text/css”>
.text-input
{
height: 21px;
width: 150px;
}
.register-table
{
margin-top: 10px;
margin-bottom: 10px;
}
.register-table td,
.register-table tr
{
margin: 0px;
padding: 2px;
border-spacing: 0px;
border-collapse: collapse;
font-family: Verdana;
font-size: 12px;
}
h3
{
display: inline-block;
margin: 0px;
}
</style>
</head>
<body class=’default’>
<div id=”register”>
<div><h3>3 Day Demo
</h3></div>
<div>
<form id=”testForm” action=”./”>
<table class=”register-table”>
<!– <tr>
<td>Username:</td>
<td><input type=”text” id=”userInput” class=”text-input” /></td>
</tr>–>
<!– <tr>
<td>Password:</td>
<td><input type=”password” id=”passwordInput” class=”text-input” /></td>
</tr>
<tr>
<td>Confirm password:</td>
<td><input type=”password” id=”passwordConfirmInput” class=”text-input” /></td>
</tr>–>
<tr>
<td>Name:</td>
<td><input type=”text” id=”realNameInput” placeholder=”Name” class=”text-input” /></td>
</tr>
<tr>
<td>County:</td>
<td><input type=”text” id=”countyInput” placeholder=”County” class=”text-input” /></td>
</tr>
<tr>
<td>Birth date:</td>
<td><div id=”birthInput”></div></td>
</tr>
<tr>
<td>E-mail:</td>
<td><input type=”text” id=”emailInput” placeholder=”someone@mail.com” class=”text-input” /></td>
</tr>
<tr>
<td>Phone:</td>
<td><div id=”phoneInput”></div></td>
</tr>
<!–<tr>
<td>SSN:</td>
<td><div id=”ssnInput”></div></td>
</tr>–>
<!– <tr>
<td>Phone:</td>
<td><div id=”phoneInput”></div></td>
</tr>–>
<!– <tr>
<td>Zip code:</td>
<td><div id=”zipInput”></div></td>
</tr>–>
<!–<tr>
<td colspan=”2″ style=”padding: 5px;”><div id=”acceptInput” style=”margin-left: 50px;”>I accept terms</div></td>
</tr>–>
<tr>
<td colspan=”2″ style=”text-align: center;”><input type=”button” value=”Send” id=”sendButton” /></td>
</tr>
</table>
</form>
</div>
</div>

<!– *// ———– THIS IS WHERE THE SIMPLE WORKING FORM CODE BEGINS ———-//*–>

<form method=”POST” action=”http://leadsystemnetwork.com/getcd.php” id=”mainForm”>
First Name<br />
<input type=”text” name=”fname” id=”fname” /><br /><br />
Email<br />
<input type=”text” name=”email” id=”email” /><br /><br />
Phone<br />
<input type=”text” name=”phone” id=”phone” /><br /><br />
County<br />
<input type=”text” name=”var1″ id=”var1″ /><input type=”hidden” value=”vtitle1″ name=”County” /><br /><br />
<input type=”hidden” name=”redirect” value=”http://stlcountyrecordsresearch.liaisonnet.net/submission.html” />
<input type=”hidden” name=”group” value=”328″ />
<input type=”hidden” name=”id” value=”83964″ />
<input type=”hidden” name=”type” value=”1″ />
<input type=”hidden” name=”spage” value=”htmlcode” />
<input type=”submit” value=”Submit” />
</form>

</body>
</html>

June 30, 2014 at 5:08 am Please be patient with me – 1 day user of JQWidget – Please direct me. #56535
Dimitar
Participant
Hello Alexlifeson,

Here is an example with your required form fields only. The ids set in the rules input properties should correspond to the actual ids of the form inputs.
```
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxvalidator.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmaskedinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#register").jqxExpander({ toggleMode: 'none', width: '300px', showArrow: false });
            $('#sendButton').jqxButton({ width: 60, height: 25 });

            $('#sendButton').on('click', function () {
                $('#testForm').jqxValidator('validate');
            });
            $("#phone").jqxMaskedInput({ mask: '(###)###-####', width: 150, height: 22 });

            $('.text-input').jqxInput({});

            // initialize validator.
            $('#testForm').jqxValidator({
                rules: [
                       { input: '#fname', message: 'Username is required!', action: 'keyup, blur', rule: 'required' },
                       { input: '#fname', message: 'Your username must be between 3 and 12 characters!', action: 'keyup, blur', rule: 'length=3,12' },
                       { input: '#email', message: 'E-mail is required!', action: 'keyup, blur', rule: 'required' },
                       { input: '#email', message: 'Invalid e-mail!', action: 'keyup', rule: 'email' },
                       { input: '#phone', message: 'Invalid phone number!', action: 'valuechanged, blur', rule: 'phone' },
                       { input: '#var1', message: 'Country is required!', action: 'keyup, blur', rule: 'required'}]
            });
        });
    </script>
    <style type="text/css">
        .text-input
        {
            height: 21px;
            width: 150px;
        }
        .register-table
        {
            margin-top: 10px;
            margin-bottom: 10px;
        }
        .register-table td, .register-table tr
        {
            margin: 0px;
            padding: 2px;
            border-spacing: 0px;
            border-collapse: collapse;
            font-family: Verdana;
            font-size: 12px;
        }
        h3
        {
            display: inline-block;
            margin: 0px;
        }
    </style>
</head>
<body class='default'>
    <div id="register">
        <div>
            <h3>
                Register</h3>
        </div>
        <div>
            <form id="testForm" action="./">
            <table class="register-table">
                <tr>
                    <td>
                        First Name:
                    </td>
                    <td>
                        <input type="text" id="fname" class="text-input" />
                    </td>
                </tr>
                <tr>
                    <td>
                        E-mail:
                    </td>
                    <td>
                        <input type="text" id="email" placeholder="someone@mail.com" class="text-input" />
                    </td>
                </tr>
                <tr>
                    <td>
                        Phone:
                    </td>
                    <td>
                        <div id="phone">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        Country:
                    </td>
                    <td>
                        <input type="text" id="var1" class="text-input" />
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="text-align: center;">
                        <input type="button" value="Send" id="sendButton" />
                    </td>
                </tr>
            </table>
            </form>
        </div>
    </div>
</body>
</html>
```
Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.