jQuery UI Widgets › Forums › Editors › Editor › jqxvalidation is not working for jqxeditor
Tagged: Angular rich text editor, jQuery rich text editor, jQxEditor, jqxvalidation, jqxvalidator, rich-text editor, validate
This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 8 years, 8 months ago.
-
Author
-
i am using jqxeditor, jqxvalidation , jqxtooltip, jqxgrip and jqxtabs all together
for jqxeditor jqxvalidation is not working properly.
it gives error when I left editor empty but when we try to add text like “test” it gives error :- Error: Syntax error, unrecognized expression: test<br>following is my code:-
//=========================== // version 1.1 //=========================== $ = jQuery.noConflict(); $(document).ready(function() { //=========================== // show the grid for email Template //=========================== loadGridForEmailTemplates(); //------------------------------------ // load add button //------------------------------------ createAddButtons(); //------------------------------------ // create window popup for add and Edit //------------------------------------ createWindowPopupforAdd(); createWindowPopupforEdit(); }); //------------------------------------------------------------------------------------------------------------------------------------------- //--------------------------------- // tooltip function starts //--------------------------------- function loadTooltipForBothAddAndEditform() { $(".TypeTooltip").jqxTooltip({ content: '<p align=left>Select the type of message you want to create.<BR>A brief explanation will appear bellow upon selecting one.</p>', position: 'mouse', name: 'movieTooltip', position: 'right', autoHideDelay: '30000' }); $(".DaysTooltip").jqxTooltip({ content: '<p align=left>Number of days to wait after the order has been paid to send this message.</p>', position: 'mouse', name: 'movieTooltip', position: 'right', autoHideDelay: '30000' }); $(".UserTooltip").jqxTooltip({ content: '<p align=left>Makes this template available to the Customers of this Seller Id.</p>', position: 'mouse', name: 'movieTooltip', position: 'right', autoHideDelay: '30000' }); $(".htmlTooltip").jqxTooltip({ content: '<p align=left>The core message send to the Buyer.<BR>This can be plain text or HTML.</p>', position: 'mouse', name: 'movieTooltip', position: 'right', autoHideDelay: '30000' }); $(".EnableTooltip").jqxTooltip({ content: '<p align=left>Please enable or disable this message template.<BR>A disabled message is ignored by the application.</p>', position: 'mouse', name: 'movieTooltip', position: 'right', autoHideDelay: '30000' }); $(".SubjectTooltip").jqxTooltip({ content: '<p align=left>The Subject of the message.</p>', position: 'mouse', name: 'movieTooltip', position: 'right', autoHideDelay: '30000' }); $(".BccTooltip").jqxTooltip({ content: '<p align=left>Select BCC yes if you want to send email.</p>', position: 'mouse', position: 'right', autoHideDelay: '30000' }); } //--------------------------------- // function to show explation //--------------------------------- function loadExplanationTextAccToTypeSelectedInAddForm() { // show the explanation on elect of the type fro Add form $("#SystemUserEmailTemplateType").change(function() { $.ajax({ url: "/ebays/fetchTypeDetailajax", type: "POST", cache: false, async: true, data: { Type: $("#SystemUserEmailTemplateType option:selected").val(), }, dataType: "json", success: function(response) { // response is JSON if (response[0] != undefined) { $('.displayExplanation').css('visibility', 'visible'); $('.displayExp').html(response[0].Explanation); } else { $('.displayExplanation').css('visibility', 'hidden'); } } }); }); // show the explanation on elect of the type for Edit form $("#Type").change(function() { $.ajax({ url: "/ebays/fetchTypeDetailajax", type: "POST", cache: false, async: true, data: { Type: $("#Type option:selected").val(), }, dataType: "json", success: function(response) { // response is JSON if (response[0] != undefined) { $('.displayExplanation').css('visibility', 'visible'); $('.displayExp').html(response[0].Explanation); } else { $('.displayExplanation').css('visibility', 'hidden'); } } }); }); } // end function //--------------------------------- // function to load the text prefilled //--------------------------------- function DisableTabInAddIfTabNotSelected(){ // if the type is nt selected we will disabled the other tabs. if ($('#SystemUserEmailTemplateType').val() == 0) { var check = $('#addtemplateForm').jqxValidator('validate'); // adding validation in add form $('#jqxTabsAdd').jqxTabs({ disabled: true }); // disabled tab } $('#SystemUserEmailTemplateType').on('change', function(event) { if ($('#SystemUserEmailTemplateType').val() == 0) { var check = $('#addtemplateForm').jqxValidator('validate'); // adding validation in add form $('#jqxTabsAdd').jqxTabs({ disabled: true }); // disabled tab } else { $('#jqxTabsAdd').jqxTabs({ disabled: false }); // enabled tab on select of the type } }); } //--------------------------------- // function to load the text prefilled //--------------------------------- function loadSubjectBodyWithPrefilledtextInAdd() { // the Tab Contents will be loaded with Ajax $('#jqxTabsAdd').on('selected', function(event) { var pageIndex = event.args.item + 1; if (pageIndex == 2) { $.ajax({ url: "/ebays/prefilledcontentajax", type: "POST", cache: false, async: true, data: { Type: $("#SystemUserEmailTemplateType").val(), }, dataType: "json", success: function(response) { // response is JSON if (response[0] != undefined) { if (response[0].Subject != undefined) { $("#SystemUserEmailTemplateSubject").val(response[0].Subject); } if (response[0].PlainTextBody != undefined) { $("#SystemUserEmailTemplatePlainTextBody").val(response[0].PlainTextBody); } } else { $("#SystemUserEmailTemplateSubject").val(''); $("#SystemUserEmailTemplatePlainTextBody").val(''); } } }); } }); } // end function to load prefilled value //--------------------------------- // function that will save value during add //--------------------------------- function addEventForSaveValueUsingAjax() { $(".addtemplate").click(function(event) { if ($('#SystemUserEmailTemplateSubject').val() == "") { alert("You haven't filled the Subject field."); return false; } event.preventDefault(); //If this method is called, the default action of the event will not be triggered. var check = $('#addtemplateForm').jqxValidator('validate'); // adding validation in add form if (check === true) { showloader(); // to disable button and show loader image var EmailTemplateType = $('#SystemUserEmailTemplateType').val(); var Subject = $('#SystemUserEmailTemplateSubject').val(); var PlainTextBody = $('#SystemUserEmailTemplatePlainTextBody').val(); var ebayuser = $('#ebayuser').val(); var Enable = $('#SystemUserEmailTemplateEnable').val(); var WaitForDays = $('#SystemUserEmailTemplateWaitForDays').val(); var Bcc = $('#SystemUserEmailTemplateBcc').val(); $.ajax({ url: "/ebays/addemailtemplateajax", type: "POST", cache: false, async: true, data: { Type: EmailTemplateType, Subject: Subject, PlainTextBody: PlainTextBody, UserPlateformId: ebayuser, Enable: Enable, Bcc: Bcc, WaitForDays: WaitForDays, }, success: function(response) { if ($.trim(response) == "success") { closePopUp(); var action = 'add'; showbuttons(); // function created in function.js file to show button enabled and hide loader gridmessage(action); $('#jqxgrid').jqxGrid('updatebounddata'); }else{ alert('Something went wrong.Please try again'); closePopUp(); $('#jqxgrid').jqxGrid('updatebounddata'); } } }); $("#addtemplateForm").submit(function() { return false; }); } else { showbuttons(); event.preventDefault(); //If this method is called, the default action of the event will not be triggered. } }); } //end add function //--------------------------------- // function to load validation //--------------------------------- function loadValidatorsForEditForm() { $('#edittemplateForm').jqxValidator({ rules: [{ input: '#PlainTextBody', message: 'Html body is required!', action: 'keyup,blur', rule: function(input, commit) { var editorValue = $.trim($(input.val()).text()); alert(editorValue); if (editorValue === "" || editorValue === '') { return false; } else { return true; } } },{ input: '#Subject', message: 'Subject is required!', action: 'blur', rule: 'required' }] }); } function loadValidatorsForAddForm(){ $('#addtemplateForm').jqxValidator({ rules: [{ input: '#SystemUserEmailTemplatePlainTextBody', message: 'Html body is required!', action: 'keyup, blur', rule: function(input, commit) { var editorValue1 = $.trim($(input.val()).text()); if (editorValue1 === "" || editorValue1 === '') { alert('ddd'); return false; } else { alert('eeee'); return true; } } },{ input: '#SystemUserEmailTemplateType', message: 'Please select a message type.', action: 'keyup,blur', rule: function(input, commit) { var type = $("#SystemUserEmailTemplateType").val(); if (type != 0) { return true; } return false; } }, { input: '#SystemUserEmailTemplateSubject', message: 'Subject is required!', action: 'keyup,blur', rule: 'required' }] }); } //end validation function //---------------------------------------------- // function to edit function //---------------------------------------------- function loadEditFormWithSavedValues(columnindex, rowindex) { //when user wants to edit the record $('#jqxTabsEdit').jqxTabs('select', 0); // open the popup window when the user clicks a button. editrow = rowindex; var offset = $("#jqxgrid").offset(); // get the clicked row's data and initialize the input fields. var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow); $("#Subject").val(dataRecord.Subject); $("#Type").val(dataRecord.TypeId); $("#Enable").val(dataRecord.Enable); $("#WaitForDays").val(dataRecord.WaitForDays); $("#Bcc").val(dataRecord.Bcc); $("#UserPlateformId").val(dataRecord.UserPlateformId); if (($("#PlainTextBody").val() == "") && (dataRecord.PlainTextBody != "")) { // after page loads $("#PlainTextBody").html(dataRecord.PlainTextBody); } else { $("#PlainTextBody").jqxEditor('val', dataRecord.PlainTextBody); } } //---------------------------------------- // function to delete function //---------------------------------------- function deleteSelectedRecord(columnindex, rowindex) { // if user click want to delete record if (confirm('Are you sure you want to delete this record?')) { deleterow = rowindex; var rowID = $('#jqxgrid').jqxGrid('getrowid', deleterow); // fetch the deleted id var del = "param=delete&Id=" + rowID; $.ajax({ url: '/ebays/deleteemailtemplateajax', data: del, type: "POST", cache: false, async: false, success: function(response) { var res = response.match(/success/g); if (response.replace(/\s+/, "") == res) { var action = "delete"; gridmessage(action); //function called to disaply me $('#jqxgrid').jqxGrid('updatebounddata'); } } }); }; } // end function // function for edit functionality function updateRecordAjax() { // update the edited row when the user clicks the 'Update' button. $(".Saverecord").click(function(event) { if($("#Subject").val()===""){ alert("You haven't filled the Subject field."); } var checkedit = $('#edittemplateForm').jqxValidator('validate'); // adding validation in add form if (checkedit == true) { showloader(); // to disable button and show loader image var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow); var row = { Subject: $("#Subject").val(), Type: $("#Type").val(), PlainTextBody: $("#PlainTextBody").val(), UserPlateformId: $("#UserPlateformId").val(), Enable: $("#Enable").val(), WaitForDays: $("#WaitForDays").val(), Bcc: $("#Bcc").val(), Enable: $("#Enable").val(), Id: rowID, }; // ajax called to UPDATE the row on edit $.ajax({ url: "/ebays/updateemailtemplateajax", type: "POST", cache: false, async: true, data: row, success: function(response) { var res = response.match(/success/g); if (response.replace(/\s+/, "") == res) { var action = 'edit'; closePopUp(); showbuttons(); // function created in function.js file to show button enabled and hide loader gridmessage(action); $('#jqxgrid').jqxGrid('updatebounddata'); }else{ alert('Something went wrong.Please try again'); closePopUp(); $('#jqxgrid').jqxGrid('updatebounddata'); } } }); $("form").submit(function() { return false; }); } else { showbuttons(); event.preventDefault(); //If this method is called, the default action of the event will not be triggered. } }); } // function to load grid function loadGridForEmailTemplates() { var url = "/ebays/emailtemplatejson"; // action from where we get the result in json var source = { datatype: "json", datafields: [{ name: 'Subject', type: 'string', map: 'SystemUserEmailTemplate>Subject' }, { name: 'Type', type: 'string', map: 'SystemEmailTemplateType>Type' }, { name: 'TypeDisplay', type: 'string', map: 'SystemEmailTemplateType>TypeDisplay' }, { name: 'PlainTextBody', type: 'string', map: 'SystemUserEmailTemplate>PlainTextBody' }, { name: 'UserPlateformId', type: 'string', map: 'SystemUserEmailTemplate>UserPlateformId' }, { name: 'TypeId', type: 'string', map: 'SystemUserEmailTemplate>Type' }, { name: 'Enable', type: 'string', map: 'SystemUserEmailTemplate>Enable' }, { name: 'Explanation', type: 'string', map: 'SystemUserEmailTemplate>Explanation' }, { name: 'Bcc', type: 'string', map: 'SystemUserEmailTemplate>Bcc' }, { name: 'WaitForDays', type: 'int', map: 'SystemUserEmailTemplate>WaitForDays' }], updaterow: function(rowid, rowdata, commit) { // synchronize with the server - send update command }, id: 'SystemUserEmailTemplate>Id', url: url, pagesize: 30 }; var cellsrenderer = function(row, columnfield, value, defaulthtml, columnproperties) { if (value == "1") { return "yes"; } else if (value == "0") { return "No"; } } var dataAdapter = new $.jqx.dataAdapter(source); var editrow = -1; // initialize jqxGrid $("#jqxgrid").jqxGrid({ width: '100%', theme: KiouiTheme, height: 350, source: dataAdapter, pageable: true, autoheight: true, sortable: true, altrows: true, enabletooltips: true, pagesizeoptions: ['10', '20', '30', '40'], showfilterrow: true, filterable: true, showtoolbar: false, enablebrowserselection: true, selectionmode: 'singlecell', // columns shown in grid are mention below columns: [{ text: '', datafield: 'Edit', columntype: 'number', filterable: false, sortable: false, width: '5%', cellsrenderer: function() { return '<div style="width: 100%"><img src="/images/edit.png" title="Edit" style=" margin-top: 10%;margin-left: 25%" /></div>'; } }, { text: 'Type', datafield: 'TypeDisplay', width: '35%', filtertype: 'checkedlist' }, { text: 'Subject', datafield: 'Subject', width: '35%' }, { text: "User", datafield: 'UserPlateformId', width: '10%' }, { text: "Bcc", datafield: 'Bcc', width: '5%', cellsrenderer: cellsrenderer, }, { text: "Enable", datafield: 'Enable', width: '5%', cellsrenderer: cellsrenderer, }, { text: '', datafield: 'Delete', columntype: 'number', filterable: false, sortable: false, width: '5%', cellsrenderer: function() { return '<div><img src="/images/trash.png" title="Delete" style="margin-top:10%;margin-left:25%" /></div>'; } }] }); // on click of edit and delete $("#jqxgrid").on("cellclick", function(event) { var column = event.args.column; var rowindex = event.args.rowindex; var columnindex = event.args.columnindex; if (columnindex == 0) { loadEditTabForEmailTemplate(); loadValidatorsForEditForm(); loadTooltipForBothAddAndEditform(); loadEditFormWithSavedValues(columnindex, rowindex); // show the popup window. $("#EditPopupWindow").jqxWindow('show'); } if (columnindex == 6) { deleteSelectedRecord(columnindex, rowindex); } }); } // function load tab for add functionality function loadAddTabForEmailTemplate() { $('#jqxTabsAdd').jqxTabs({ //width: "600px", initTabContent: function(tab) { switch (tab) { case 0: //---------------------------------================= // called ajax to save the data on click of "add template" //---------------------------------================== addEventForSaveValueUsingAjax(); break; case 1: $("#SystemUserEmailTemplatePlainTextBody").jqxEditor({ height: '440px', width: '650px' }); break; } } }); // adding tabS } function loadEditTabForEmailTemplate() { $('#jqxTabsEdit').jqxTabs({ //width: "600px", initTabContent: function(tab) { switch (tab) { case 0: $("#Type").prop("disabled", true); updateRecordAjax(); break; case 1: $("#PlainTextBody").jqxEditor({ height: '440px', width: '650px' }); break; } } }); // adding tabs } function closePopUp(){ $('#AddPopupWindow').jqxWindow('close'); $('#EditPopupWindow').jqxWindow('close'); $('#jqxTabsAdd').jqxTabs('select', 0); $('#jqxTabsEdit').jqxTabs('select', 0); } //Adding event listeners function openPopupForAddButton() { $('#addrowbutton1').click(function() { loadAddTabForEmailTemplate(); $('#SystemUserEmailTemplateSubject').val(''); $('#SystemUserEmailTemplatePlainTextBody').val(''); $('#ebayuser').val('All'); $('#SystemUserEmailTemplateWaitForDays').val('0'); $('#SystemUserEmailTemplateType').val('0'); loadTooltipForBothAddAndEditform(); loadValidatorsForAddForm(); DisableTabInAddIfTabNotSelected(); loadSubjectBodyWithPrefilledtextInAdd(); loadExplanationTextAccToTypeSelectedInAddForm(); $('#AddPopupWindow').jqxWindow('open'); // to open the window onclick of open button }); } //Creating all page elements which are jqxWidgets function createAddButtons() { $('#addrowbutton1').jqxButton({ width: '70px', theme: KiouiTheme }); $('.addtemplate').jqxButton({ width: '70px', theme: KiouiTheme }); $('.CloseButtonEditWindow').jqxButton({ width: '70px', theme: KiouiTheme }); $('.Saverecord').jqxButton({ width: '70px', theme: KiouiTheme }); $('.CloseButtonAddWindow').jqxButton({ width: '70px', theme: KiouiTheme }); openPopupForAddButton(); } //Creating the window function createWindowPopupforAdd() { var offset = $("#jqxgrid").offset(); $('#AddPopupWindow').jqxWindow({ theme: KiouiTheme, isModal: true, modalOpacity: 0.3, cancelButton: $(".CloseButtonAddWindow"), height: 850, width: 850, resizable: false, autoOpen: false, initContent: function() { $('#AddPopupWindow').jqxWindow('focus'); }, }); $('.CloseButtonAddWindow').mouseup(function() { closePopUp(); }); $('#AddPopupWindow').on('close', function (event) { $('#jqxTabsAdd').jqxTabs('select', 0); }); } function createWindowPopupforEdit() { // initialize the edit pop up window. $("#EditPopupWindow").jqxWindow({ resizable: false, isModal: true, autoOpen: false, cancelButton: $(".CloseButtonEditWindow"), modalOpacity: 0.3, theme: KiouiTheme, height: 850, width: 850, }); $('.CloseButtonEditWindow').mouseup(function() { closePopUp(); }); $('#EditPopupWindow').on('close', function (event) { // closePopUp(); $('#jqxTabsEdit').jqxTabs('select', 0); }); }
<div id=”AddPopupWindow”>
<div id=”windowHeader”>
<span>Add Email Template </span>
</div>
<div id=”jqxTabsAdd”>
<!– ul li to create tabs–>-
<li style=”margin-left: 30px;”>Details
- Message
- Rules
<div style=”overflow: hidden;” ><!– detail tab–>
<table cellspacing=”0″ class=”grey-layout”>
<tr>
<td style=”padding:10px”>
<table cellspacing=”0″ class=”content-space”>
<!–Email Template form start here–>
<form accept-charset=”utf-8″ method=”post” id=”addtemplateForm” action=””><tr>
<td>
Type:
</td>
<td>
<select id=”SystemUserEmailTemplateType” class=”typeajax”>
<option value=”0″>Notification</option>
<option value=”2″>test</option>
<option value=”13″>testingg</option></select>
</td>
<td></td>
</tr>
<tr>
<td style=”height:5px;line-height:5px;” colspan=”2″> </td>
</tr>
<tr>
<td>
Enable:
</td>
<td>
<select id=”SystemUserEmailTemplateEnable”>
<option value=”0″>No</option>
<option value=”1″>Yes</option>
</select>
</td>
<td></td></tr>
<tr>
<td style=”height:5px;line-height:5px;” colspan=”2″>
</td>
</tr>
<tr>
<td colspan=”2″>
<input type=”submit” value=”Add” class=”addtemplate”/>
<input type=”button” value=”Close” class=”CloseButtonAddWindow”/>
</td>
</tr></form>
<!–Email Template form ends here–>
</table>
</td>
</tr>
</table>
<div style=”visibility: hidden;margin-left: 20px;margin-top: 20px;” class=”displayExplanation” >
<div class=”displayExp” >
</div>
</div>
</div>
<div style=”overflow: hidden;”> <!– message tab –>
<table>
<form accept-charset=”utf-8″ method=”post” id=”addtemplateForm” action=””><tr>
<td>Subject:</td>
<td>
<input type=”text” id=”SystemUserEmailTemplateSubject”/>
</td>
<td></td>
</tr>
<tr>
<td style=”height:5px;line-height:5px;” colspan=”2″>
</td>
</tr>
<tr>
<td>Body:</td>
<td>
<textarea id=”SystemUserEmailTemplatePlainTextBody”></textarea >
</td>
<td></td></tr>
<tr>
<td style=”height:5px;line-height:5px;” colspan=”2″>
</td>
</tr><tr>
<td colspan=”2″>
<input type=”submit” value=”Add” class=”addtemplate”/>
<input type=”button” value=”Close” class=”CloseButtonAddWindow”/>
</td>
</tr>
</form>
</table>
</div>
<div style=”overflow: hidden;” > <!– rule tab –>
<table>
<form accept-charset=”utf-8″ method=”post” id=”addtemplateForm” action=””>
<tr>
<td> User:</td>
<td>
<select id=”ebayuser” class=”ebayuser SystemUserEmailTemplateUserPlateformId” name=”data[SystemUserEmailTemplate][UserPlateformId]”>
<option value=”All”>All</option>
<option value=”testingg”>testingg</option></select>
</td>
<td></td></tr>
<tr>
<td style=”height:5px;line-height:5px;” colspan=”2″>
</td>
</tr>
<tr>
<td>Wait for Days :</td>
<td>
<select id=”SystemUserEmailTemplateWaitForDays”>
<option value=”0″>0 Day</option>
<option value=”1″>1 Day</option>
<option value=”2″>2 Days</option>
<option value=”3″>3 Days</option>
<option value=”4″>4 Days</option>
<option value=”5″>5 Days</option>
<option value=”6″>6 Days</option>
<option value=”7″>7 Days</option>
<option value=”8″>8 Days</option>
<option value=”9″>9 Days</option>
<option value=”10″>10 Days</option>
<option value=”11″>11 Days</option>
<option value=”12″>12 Days</option>
<option value=”13″>13 Days</option>
<option value=”14″>14 Days</option>
<option value=”15″>15 Days</option>
<option value=”16″>16 Days</option>
<option value=”17″>17 Days</option>
<option value=”18″>18 Days</option>
<option value=”19″>19 Days</option>
<option value=”20″>20 Days</option>
<option value=”21″>21 Days</option>
<option value=”22″>22 Days</option>
<option value=”23″>23 Days</option>
<option value=”24″>24 Days</option>
<option value=”25″>25 Days</option>
<option value=”26″>26 Days</option>
<option value=”27″>27 Days</option>
<option value=”28″>28 Days</option>
<option value=”29″>29 Days</option>
<option value=”30″>30 Days</option>
<option value=”31″>31 Days</option>
</select>
</td>
<td></td></tr>
<tr>
<td style=”height:5px;line-height:5px;” colspan=”2″>
</td>
</tr>
<tr>
<td>Bcc me:</td>
<td>
<select id=”SystemUserEmailTemplateBcc”>
<option value=”0″>No</option>
<option value=”1″>Yes</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td style=”height:5px;line-height:5px;” colspan=”2″>
</td>
</tr>
<tr>
<td colspan=”2″>
<input type=”submit” value=”Add” class=”addtemplate”/> <input type=”button” value=”Close” class=”CloseButtonAddWindow”/>
</td>
</tr>
</form>
</table>
</div>
</div>
</div>
i even tried to create fiddle for this but it is to complicated to create it. your help will be appriciatedHello prianch,
Your code is too extensive for us to test or review. Please share where exactly in your code the error is thrown. Please also take a look at the following clarification regarding the validation of jqxEditor: http://www.jqwidgets.com/community/topic/validate-jqxeditor/#post-73484.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.