jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
248 lines (235 loc) • 10.1 kB
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.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="../../scripts/demos.js"></script>
<style type="text/css">
.demo-iframe {
border: none;
width: 600px;
height: 400px;
clear: both;
display: none;
}
.text-input
{
height: 23px;
width: 150px;
}
.register-table
{
margin-top: 10px;
margin-bottom: 10px;
}
.register-table td,
.register-table tr
{
border-spacing: 0px;
border-collapse: collapse;
font-family: Verdana;
font-size: 12px;
}
h3
{
display: inline-block;
margin: 0px;
}
.prompt {
margin-top: 10px; font-size: 10px;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$('#sendButton').jqxButton({ width: 60, height: 25});
$('#acceptInput').jqxCheckBox({ width: 130});
$("#ssnInput").jqxMaskedInput({ mask: '###-##-####', width: 150, height: 22});
$("#phoneInput").jqxMaskedInput({ mask: '(###)###-####', width: 150, height: 22});
$("#zipInput").jqxMaskedInput({ mask: '###-##-####', width: 150, height: 22});
$('.text-input').addClass('jqx-input');
$('.text-input').addClass('jqx-rc-all');
if (theme.length > 0) {
$('.text-input').addClass('jqx-input-' + theme);
$('.text-input').addClass('jqx-widget-content-' + theme);
$('.text-input').addClass('jqx-rc-all-' + theme);
}
var date = new Date();
date.setFullYear(1985, 0, 1);
$('#birthInput').jqxDateTimeInput({ width: 150, height: 22, value: $.jqx._jqxDateTimeInput.getDateTime(date) });
// initialize validator.
$('#form').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: 'Real Name is required!', action: 'keyup, blur', rule: 'required' },
{ input: '#realNameInput', message: 'Your real name must contain only letters!', action: 'keyup', rule: 'notNumber' },
{ input: '#realNameInput', message: 'Your real name 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/2012.', action: 'valueChanged', rule: function (input, commit) {
var date = $('#birthInput').jqxDateTimeInput('getDate');
$.ajax({
url: "registration.php",
type: 'POST',
data: {birthInputYear: date.getFullYear()},
success: function(data)
{
if (data == "true")
{
commit(true);
}
else commit(false);
},
error: function()
{
commit(false);
}
});
}
},
{ 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' }]
});
// validate form.
$("#sendButton").click(function () {
var validationResult = function (isValid) {
if (isValid) {
$("#form").submit();
}
}
$('#form').jqxValidator('validate', validationResult);
});
$("#form").on('validationSuccess', function () {
$("#form-iframe").fadeIn('fast');
});
});
</script>
<div style="height: 219px;">
<form class="form" id="form" target="form-iframe" method="post" action="registration.php" style="font-size: 13px; font-family: Verdana; width: 650px;">
<div>
<h2>Register</h2>
</div>
<table class="register-table">
<tr>
<td>Username:</td>
<td><input name="username" type="text" id="userInput" class="text-input" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input name="password" 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>Real name:</td>
<td><input name="realname" type="text" id="realNameInput" class="text-input" /></td>
</tr>
<tr>
<td>Birth date:</td>
<td><div name="birthdate" id="birthInput"></div></td>
</tr>
<tr>
<td>E-mail:</td>
<td><input name="email" type="text" id="emailInput" class="text-input" /></td>
</tr>
<tr>
<td>SSN:</td>
<td><div name="ssn" id="ssnInput"></div></td>
</tr>
<tr>
<td>Phone:</td>
<td><div name="phone" id="phoneInput"></div></td>
</tr>
<tr>
<td>Zip code:</td>
<td><div name="zip" id="zipInput"></div></td>
</tr>
<tr>
<td colspan="2" style="padding: 5px;"><div name="acceptterms" 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>
<div class="prompt">*For successful registration, username=admin, password=admin123</div>
</form>
<iframe id="form-iframe" name="form-iframe" class="demo-iframe" frameborder="0"></iframe>
</div>
</body>
</html>
<!--registration.php
// check whether the entered year is in the range of 1900 - 2012
if (isset($_POST["birthInputYear"]))
{
$year = $_POST["birthInputYear"];
// validate year.
if ($year > "2012" || $year < "1900")
{
echo "false";
}
else
{
echo "true";
}
return;
}
$formData = array(
"username" => $_POST["username"],
"password" => $_POST["password"],
"realname" => $_POST["realname"],
"birthdate" => $_POST["birthdate"],
"email" => $_POST["email"],
"ssn" => $_POST["ssn"],
"phone" => $_POST["phone"],
"zip" => $_POST["zip"],
"acceptterms" => $_POST["acceptterms"]
);
// check whether the terms are accepted.
if($formData['acceptterms'] != 'true')
{
$response = "<p><h1>Registration Not Successful</h1></p><p>You need to accept the terms.</p>";
echo $response;
return;
}
// the registration is successful only if the username is 'admin' and the password is 'admin123'.
if($formData['username'] == 'admin' && $formData['password'] == 'admin123') {
$response = "<p><h1>Registration Successful</h1></p><p></p>";
$response .= "Username:" .$formData['username'] .= "<br/>";
$response .= "Password:" .$formData['password'] .= "<br/>";
$response .= "Real name:" .$formData['realname'] .= "<br/>";
$response .= "Birth date:" .$formData['birthdate'] .= "<br/>";
$response .= "E-mail:" .$formData['email'] .= "<br/>";
$response .= "SSN:" .$formData['ssn'] .= "<br/>";
$response .= "Phone:" .$formData['phone'] .= "<br/>";
$response .= "Zip code:" .$formData['zip'] .= "<br/>";
}
else {
$response = "<p><h1>Registration Not Successful</h1></p><p>Invalid username or password.</p>";
}
echo $response;
-->