jQuery UI Widgets › Forums › Plugins › Validator, Drag & Drop, Sortable › Validator not working on popup window
Tagged: jquery form, jqxvalidator, validator
This topic contains 15 replies, has 2 voices, and was last updated by Peter Stoev 10 years ago.
-
Author
-
We have an html page that creates a form:
<div> <br><br> <div id="createUser" class="submit createNew createUserButton"> <img class="createNewUserImg" style="width:25px; height=25px;" src="<?php echo $this->basePath('img/add.png') ?>"/> </div> <br><br> <div id="createUserGrid" class="jqxgrid jqxAdminUserGrid"></div> </div>
The validator that goes with it works:
function createUserValidator() { $("[name='newPassword']").jqxPasswordInput({ width: '165px', height: '20px', showStrength: true, showStrengthPosition: "right" }); $("[name='newPasswordVerify']").jqxPasswordInput({ width: '165px', height: '20px', showStrength: true, showStrengthPosition: "right" }); // this prevents auto reload of page and let me validate $(".createUserButton").on('submit', function() { //if action is false then we can validate - otherwise it's a code based press so call action if ($('.createUserButton').attr('action') == 'false') { $('.createUserButton').jqxValidator('validate'); return false; } else { // let's us continue with action return true; } }); $(".createUserButton").jqxValidator({ position: 'left', rules: [ {input: "[name='username']", message: 'Username is required!', action: 'keyup, blur', rule: 'required'}, {input: "[name='username']", message: 'Your username must be between 4 and 50 characters!', action: 'keyup, blur', rule: 'length=4,50'}, {input: "[name='email']", message: 'E-mail is required!', action: 'keyup, blur', rule: 'required'}, {input: "[name='email']", message: 'Invalid e-mail!', action: 'keyup', rule: 'email'}, {input: "[name='display_name']", message: 'Display (Real) Name is required!', action: 'keyup, blur', rule: 'required'}, {input: "[name='display_name']", message: 'Your real name must not contain numbers!', action: 'keyup', rule: 'notNumber'}, {input: "[name='newPassword']", message: 'Password is required!', action: 'keyup, blur', rule: 'required'}, {input: "[name='newPassword']", message: 'Your password must be between 6 and 16 characters!', action: 'keyup, blur', rule: 'length=6,16'}, {input: "[name='newPasswordVerify']", message: 'Password is required!', action: 'keyup, blur', rule: 'required'}, {input: "[name='newPasswordVerify']", message: 'Passwords don\'t match!', action: 'keyup, focus', rule: function (input, commit) { if (input.val() === $("[name='newPassword']").val()) { return true; } return false; } } ] }); $(".createUserButton").on('validationError', function (event) { }); $(".createUserButton").on('validationSuccess', function (event) { // valid entry so set the action and click the submit button again with action attached $('.createUserButton').attr('action', createUserUrl); $("#createUserSubmit").click(); }); $("#dialogCancelButton").click(function(){ $(".createUserButton").jqxValidator('hide'); }); $("#dialogWindow").on('close', function () { $(".createUserButton").jqxValidator('hide'); }); }' Yet, when in the jquery code we create cells in a grid that are to use the same form and the same validator, the validator will NOT work. I see no hints, no messages and get nothing. both have the class createUserButton which is used to associate the validator to the class but the edit form does not get validated. Any ideas?
var editCellRenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
return ‘<div onclick=”editButtonPress(this);” type=”button” class=”btnEdit userButton createUserButton jqx-rc-all jqx-rc-all-darkblue jqx-button jqx-button-darkblue jqx-widget jqx-widget-darkblue jqx-fill-state-normal jqx-fill-state-normal-darkblue” id=”‘ + row +'” value=”Edit User” style=”width:100%”/>’
+’</div>’;
};`Sorry, messed up the last piece of code submission:
var editCellRenderer = function (row, columnfield, value, defaulthtml, columnproperties) { return '<div onclick="editButtonPress(this);" type="button" class="btnEdit userButton createUserButton jqx-rc-all jqx-rc-all-darkblue jqx-button jqx-button-darkblue jqx-widget jqx-widget-darkblue jqx-fill-state-normal jqx-fill-state-normal-darkblue" id="' + row +'" value="Edit User" style="width:100%"/>' +'<img class="userButtonEditImg" style="width:20px; height=20px;" src="img/pencil.png"/></div>'; };
Hi WildWill,
I wrote you in your another topic what you should do – http://www.jqwidgets.com/community/topic/validator-tooltips-do-not-follow-dialog/
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/Peter,
I saw that but this is not the same problem. I am getting NOTHING now. With the HTML created form the validator works great with the hints where they should be. But when the form is created from the call in jquery I get no validation.
Bill
Peter,
I went and double checked the post, just to say I had, and when I click on the link you posted ( http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxvalidator/validation-label.htm?arctic) I just get a form that validates but no code behind it so I don’t know what the structure of the code is to try on my system. You have another link to that code?
Bill
Oops. I forgot to look at the source. My bad. But, still, this is what we have and see above explanation of what is wrong.
Hi Bill,
The demo demonstrates how to use the “Labels” display mode of the Validator – the one which you should use with Popups.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/Peter,
I tried, still doesn’t work with lables.
Bill
Peter,
I am trying to use the same validator code for both the create and edit as they have the same fields. They are both popups. The Create works with either type of hint. I get absolutely no hints or validation with the edit. I think it lies in the fact that the edit is not a static HTML form but rather created dynamically in jquery. I just don’t know what the problem is.
var editCellRenderer = function (row, columnfield, value, defaulthtml, columnproperties) { return '<div onclick="editButtonPress(this);" type="button" class="btnEdit userButton commonButton jqx-rc-all jqx-rc-all-darkblue jqx-button jqx-button-darkblue jqx-widget jqx-widget-darkblue jqx-fill-state-normal jqx-fill-state-normal-darkblue" id="' + row +'" value="Edit User" style="width:100%"/>' +'<img class="userButtonEditImg" style="width:20px; height=20px;" src="img/pencil.png"/></div>'; };
<div id='dialogWindow'> <div id='dialogWindowHeader'> <span id='captureContainer' style="float:left;"></span> </div> <div id='dialogWindowContent' style="overflow: hidden"> <div class="formDiv" id="userCreateForm"> <?php echo $this->form()->openTag($userCreateForm);?> <table> <?php echo $this->formElement($userCreateForm->get('csrf')) . PHP_EOL; ?> <?php echo $this->formElement($userCreateForm->get('form_type')) . PHP_EOL; ?> <tr><td><label><?php echo $this->escapeHtml($userCreateForm->get('username')->getLabel()); ?></label></td> <td><?php echo $this->formElement($userCreateForm->get('username')) . PHP_EOL; ?></td></tr> <tr><td><label><?php echo $this->escapeHtml($userCreateForm->get('email')->getLabel()); ?></label></td> <td><?php echo $this->formElement($userCreateForm->get('email')) . PHP_EOL; ?></td></tr> <tr><td><label><?php echo $this->escapeHtml($userCreateForm->get('display_name')->getLabel()); ?></label></td> <td><?php echo $this->formElement($userCreateForm->get('display_name')) . PHP_EOL; ?></td></tr> <tr><td><label><?php echo $this->escapeHtml($userCreateForm->get('inventory_user_id')->getLabel()); ?></label></td> <td><?php echo $this->formElement($userCreateForm->get('inventory_user_id')) . PHP_EOL; ?></td></tr> <tr><td><label><?php echo $this->escapeHtml($userCreateForm->get('role_id')->getLabel()); ?></label></td> <td><?php echo $this->formElement($userCreateForm->get('role_id')) . PHP_EOL; ?></td></tr> <tr><td><label><?php echo $this->escapeHtml($userCreateForm->get('newPassword')->getLabel()); ?></label></td> <td><?php echo $this->formElement($userCreateForm->get('newPassword')) . PHP_EOL; ?></td></tr> <tr><td><label><?php echo $this->escapeHtml($userCreateForm->get('newPasswordVerify')->getLabel()); ?></label></td> <td><?php echo $this->formElement($userCreateForm->get('newPasswordVerify')) . PHP_EOL; ?></td></tr> <tr><td><label><?php echo $this->escapeHtml($userCreateForm->get('currentPassword')->getLabel()); ?></label></td> <td><?php echo $this->formElement($userCreateForm->get('currentPassword')) . PHP_EOL; ?></td></tr> </table> <br> <?php echo $this->formElement($userCreateForm->get('submit')) . PHP_EOL; ?> <?php echo $this->form()->closeTag($userCreateForm);?> </div> </div> </div>
Reposting the code used to create forms.
<div> <br><br> <div id="createUser" class="submit createNew createUserButton commonButton"> <img class="createNewUserImg" style="width:25px; height=25px;" src="<?php echo $this->basePath('img/add.png') ?>"/> </div> <br><br> <div id="createUserGrid" class="jqxgrid jqxAdminUserGrid"></div> </div>
Hi Bill,
It does not matter how you create your Form. It matters how you create the Validator. I would suggest you to learn how to do this from the Documentation and the example which I pointed you out. The example I pointed you shows how to create a Validator and use its Labels hint type instead of tooltips, which is better for Popup Windows.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/Peter,
Here is my validtor creation. I compare it to what you have. I am using a class, not an id to associate the validator to. Regarless of the hint type it doesn’t work. Works on one, doesn’t work on the other. If you think I do not know how to create a validator then point me to what I have done wrong.
Bill
$(".commonButton").jqxValidator({ position: 'left', << regardless of the following line being present, I get nothing >> hintType: 'label', rules: [ {input: "[name='username']", message: 'Username is required!', action: 'keyup, blur', rule: 'required'}, {input: "[name='username']", message: 'Your username must be between 4 and 50 characters!', action: 'keyup, blur', rule: 'length=4,50'}, {input: "[name='email']", message: 'E-mail is required!', action: 'keyup, blur', rule: 'required'}, {input: "[name='email']", message: 'Invalid e-mail!', action: 'keyup', rule: 'email'}, {input: "[name='display_name']", message: 'Display (Real) Name is required!', action: 'keyup, blur', rule: 'required'}, {input: "[name='display_name']", message: 'Your real name must not contain numbers!', action: 'keyup', rule: 'notNumber'}, {input: "[name='newPassword']", message: 'Password is required!', action: 'keyup, blur', rule: 'required'}, {input: "[name='newPassword']", message: 'Your password must be between 6 and 16 characters!', action: 'keyup, blur', rule: 'length=6,16'}, {input: "[name='newPasswordVerify']", message: 'Password is required!', action: 'keyup, blur', rule: 'required'}, {input: "[name='newPasswordVerify']", message: 'Passwords don\'t match!', action: 'keyup, focus', rule: function (input, commit) { if (input.val() === $("[name='newPassword']").val()) { return true; } return false; } } ] });
Hi Bill,
I can’t point you what’s wrong in your code when you provide only a part of it. If you would like someone to try to help you, then provide a jsfiddle.net demo which illustrates your problem.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/Peter,
That isn’t going to be possible. I am not a regular web developer. I am helping some others here to get this working. I don’t know how to make what I am working with into a jsfiddle demo. Too many parts for me to figure out – jquery, jqwidgets, php, web server(s)/services, etc. I don’t really know all about that stuff.
All I can tell you is that when the create user pop up window is displayed, I see the hints regardless of the type (label or not). When the edit user pop up is displayed, if the hintType: ‘label’ is set, I (somehow now?!?!) see ONLY newPassword and newPasswordVerify hints ‘Password is required!’ All other hints do not show up (for instance if I delete the user name, I don’t see the Username is required! hint). If the hintType is not set to label, then I see absolutely no hints. This is the best I can do telling you what’s wrong.
$(".commonButton").jqxValidator({ hintType: 'label', rules: [ {input: "[name='username']", message: 'Username is required!', action: 'keyup, blur', rule: 'required'}, {input: "[name='username']", message: 'Your username must be between 4 and 50 characters!', action: 'keyup, blur', rule: 'length=4,50'}, {input: "[name='email']", message: 'E-mail is required!', action: 'keyup, blur', rule: 'required'}, {input: "[name='email']", message: 'Invalid e-mail!', action: 'keyup', rule: 'email'}, {input: "[name='display_name']", message: 'Display (Real) Name is required!', action: 'keyup, blur', rule: 'required'}, {input: "[name='display_name']", message: 'Your real name must not contain numbers!', action: 'keyup', rule: 'notNumber'}, {input: "[name='newPassword']", message: 'Password is required!', action: 'keyup, blur', rule: 'required'}, {input: "[name='newPassword']", message: 'Your password must be between 6 and 16 characters!', action: 'keyup, blur', rule: 'length=6,16'}, {input: "[name='newPasswordVerify']", message: 'Password is required!', action: 'keyup, blur', rule: 'required'}, {input: "[name='newPasswordVerify']", message: 'Passwords don\'t match!', action: 'keyup, focus', rule: function (input, commit) { if (input.val() === $("[name='newPassword']").val()) { return true; } return false; } } ] });
The only other thing I can think of is that I have to call the validator creation. It is not automatic. When the editButtonPress function is called for the edit user (see below), the first thing I do is call the function that has the validator creation.
var editCellRenderer = function (row, columnfield, value, defaulthtml, columnproperties) { return '<div onclick="editButtonPress(this);" type="button" class="btnEdit userButton commonButton jqx-rc-all jqx-rc-all-darkblue jqx-button jqx-button-darkblue jqx-widget jqx-widget-darkblue jqx-fill-state-normal jqx-fill-state-normal-darkblue" id="' + row +'" value="Edit User" style="width:100%"/>' +'<img class="userButtonEditImg" style="width:20px; height=20px;" src="img/pencil.png"/></div>'; };
But when it is a create user, the jquery code detects that the class is createNew and there I call the validator creation.
if ($('.createNew').length > 0){ $('.createNew').click(function(){ if ($(this).attr('id') == 'createUser'){ createUserValidator(false); $("[name='user_id']").val("");
I am telling you all this in the final possibility that you can help me. If none of this helps you help me I am going to have to quit on this task. Regardless, I thank you for all you have tried and shown me.
Bill
-
AuthorPosts
You must be logged in to reply to this topic.