Input validator question - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: div, form, initialization, initialize, Input, jqxvalidator, password, validate, validation, validator

This topic contains 3 replies, has 2 voices, and was last updated by Dimitar 9 years, 9 months ago.

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

Author

Input validator question Posts
January 13, 2015 at 8:35 pm Input validator question #65323

cpuin
Participant

Hello,

I want to implement simple password validator checking password and confirmed password from two jqxPasswordInput.
From the examples in the demo, there is $(“#form”).jqxValidator({
The problem is that i don’t have a form.I have a button and when is triggered i implement an “update” command.
So, what name to give to the validator and how to check fields?

Here is the code:

`
<script type=”text/javascript”>
$(document).ready(function () {
$(“#addDialog”).jqxWindow({
resizable: false,
isModal: true,
position: { left: $(“#dataTable”).offset().left + 300, top: $(“#dataTable”).offset().top + 35 },
width: 400, height: 270,
autoOpen: false
});

$(“#addDialog”).css(‘visibility’, ‘visible’);
$(“#addDialog”).on(‘close’, function () {
// enable jqxDataTable.
$(“#dataTable”).jqxDataTable({ disabled: false });
});

$(“#_cancelButton”).jqxButton();
$(“#_cancelButton”).mousedown(function () {
// close jqxWindow.
$(“#addDialog”).jqxWindow(‘close’);
});

$(“#_saveButton”).jqxButton();
$(“#_saveButton”).mousedown(function () {
// close jqxWindow.
$(“#addDialog”).jqxWindow(‘close’);
// update edited row.
var editRow = parseInt($(“#addDialog”).attr(‘data-row’));
var rowData = {
Code: 23,
GroupID: 3,
Name: $(“#_userName”).val(),
Name2: $(“#_userName2”).val(),
UserLevel: $(“#_userLevel”).val(),
Password: $(“#_userPassword”).val(),
};
$(“#dataTable”).jqxDataTable(‘addRow’,editRow, rowData);
$(“#dataTable”).jqxDataTable(‘updateBoundData’);
});

});

</script>
</head>
<body class=’default’>

<div style=”visibility: hidden;” id=”addDialog”>
<div>Добавяне на потребител</div>
<div style=”overflow: hidden;”>

<table style=”table-layout: fixed; border-style: none;”>
<tr>
<td align=”right”>Име:
</td>
<td align=”left”>
<input id=”_userName” type=”text”/>
</td>
</tr>
<tr>
<td align=”right”>Име2:
</td>
<td align=”left”>
<input id=”_userName2″ type=”text”/>
</td>
</tr>
<tr>
<td align=”right”>Ниво на достъп:
</td>
<td align=”left”>
<div id=”_userLevel”></div>
</td>
</tr>
<tr>
<td align=”right”>Парола:</td>
<td align=”left”>
<input id=”_userPassword” type=”password”/>
</td>
</tr>
<tr>
<td align=”right”>Потвърди паролата:</td>
<td align=”left”>
<input id=”_userPasswordConfirm” type=”password”/>
</td>
</tr>
<tr>
<td colspan=”2″ align=”right”>
<br />
<button id=”_saveButton”>Запази</button> <button style=”margin-left: 5px;” id=”_cancelButton”>Откажи</button></td>
</tr>
</table>

</div>
</div>

</body>
</html>

January 14, 2015 at 8:01 am Input validator question #65339

Dimitar
Participant

Hello cpuin,

While other elements except form are not supported, validation of a div may work in your case. Please try initializing the validator from the div with id addDialog.

Best Regards,
Dimitar

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

January 14, 2015 at 12:29 pm Input validator question #65353
cpuin
Participant
Meaninng like this:
```
$("#addDialog").jqxWindow({
                                resizable: false,
                                isModal: true,
                                position: { left: $("#dataTable").offset().left + 300, top: $("#dataTable").offset().top + 35 },
                                width: 400, height: 270,
                                autoOpen: false
                                $("#addDialog").jqxValidator({
                                                rules: [
                                                        
                                                        { input: "#_userPassword", message: "Password is required!", action: 'keyup, blur', rule: 'required' },
                                                        { input: "#_userPasswordConfirm", message: "Password is required!", action: 'keyup, blur', rule: 'required' },
                                                        {
                                                            input: "#_userPasswordConfirm", message: "Passwords should match!", action: 'keyup, blur', rule: function (input, commit) {
                                                                var firstPassword = $("#_userPassword").jqxPasswordInput('val');
                                                                var secondPassword = $("#_userPasswordConfirm").jqxPasswordInput('val');
                                                                return firstPassword == secondPassword;
                                                            }
                                                        }
                                                ],  hintType: "label"
                                            });
                            });
```
i got an error:

SyntaxError: Unexpected identifier ‘$’. Expected ‘}’ to end a object literal.
January 15, 2015 at 6:30 am Input validator question #65397
Dimitar
Participant
Hi cpuin,

Your code is syntactically incorrect. Here is how it should look like:
```
$("#addDialog").jqxWindow({
    resizable: false,
    isModal: true,
    position: { left: $("#dataTable").offset().left + 300, top: $("#dataTable").offset().top + 35 },
    width: 400, height: 270,
    autoOpen: false
});
$("#addDialog").jqxValidator({
    rules: [
        { input: "#_userPassword", message: "Password is required!", action: 'keyup, blur', rule: 'required' },
        { input: "#_userPasswordConfirm", message: "Password is required!", action: 'keyup, blur', rule: 'required' },
        { input: "#_userPasswordConfirm", message: "Passwords should match!", action: 'keyup, blur', rule: function (input, commit) {
            var firstPassword = $("#_userPassword").jqxPasswordInput('val');
            var secondPassword = $("#_userPasswordConfirm").jqxPasswordInput('val');
            return firstPassword == secondPassword;
        }
        }
    ], hintType: "label"
});
```
Best Regards,
Dimitar

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

Posts

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

You must be logged in to reply to this topic.