Prevent Appointment Add with Validation Error - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Html Scheduler, javascript scheduler, jquery scheduler, jqwidgets scheduler, jqxScheduler, jqxvalidator, scheduler, validation

This topic contains 6 replies, has 3 voices, and was last updated by Henley 6 years, 11 months ago.

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

Author

Prevent Appointment Add with Validation Error Posts

February 23, 2018 at 10:48 am Prevent Appointment Add with Validation Error #98892

Henley

Participant

Hi, is there any way to prevent the dialog box closed and proceed to appointment add if the validation error is triggered? I found one example from here https://jseditor.io/?key=scheduler-edit-dialog-validations but the event still proceeds to appointment add even though through the validation error is triggered. Please give me some solution because I am searching for it for a long time. Thanks in advance.

February 23, 2018 at 11:16 am Prevent Appointment Add with Validation Error #98893

Stanislav

Participant

Hello Henley,

Take a look at this forum post: Link

Best Regards,
Stanislav

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

February 23, 2018 at 11:29 am Prevent Appointment Add with Validation Error #98894

Henley

Participant

Hello Stanislav,

I come through that post, but there is no solution to handle this. The scheduler still able to save empty Title even though I have added the code below

fields.subject.jqxValidator({
rules: [{ input: fields.subject, message: ‘Title is required!’, action: ‘keyup, blur’, rule: ‘required’ }]
});

February 26, 2018 at 2:00 pm Prevent Appointment Add with Validation Error #98908

Stanislav

Participant

Hello Henley,

I am testing this case.
Once I am done, I will tell you the results.

Best Regards,
Stanislav

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

March 1, 2018 at 7:32 am Prevent Appointment Add with Validation Error #98971

Henley

Participant

Hi Stanislav,

Thank you and I’m looking forward of your results.

March 2, 2018 at 12:13 pm Prevent Appointment Add with Validation Error #99006

Hristo

Participant

Hello Henley,

Please, take a look at this example:

 <!DOCTYPE html>
 <html lang="en">
 <head>
    <title id='Description'>
        jqxScheduler Edit Dialog example
     </title>
     <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
     <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
     <script type="text/javascript" src="../../scripts/jquery-1.12.4.min.js"> </script>

     <script type="text/javascript" src="../../jqwidgets/jqxcore.js"> </script>
     <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"> </script>
     <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"> </script>
     <script type="text/javascript" src="../../jqwidgets/jqxdata.js"> </script>
     <script type="text/javascript" src="../../jqwidgets/jqxdate.js"> </script>
     <script type="text/javascript" src="../../jqwidgets/jqxscheduler.js"> </script>
     <script type="text/javascript" src="../../jqwidgets/jqxscheduler.api.js"> </script>
     <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"> </script>
     <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"> </script>
     <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"> </script>
     <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"> </script>
     <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"> </script>
     <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"> </script>
     <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"> </script>
     <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"> </script>
     <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"> </script>
     <script type="text/javascript" src="../../jqwidgets/jqxvalidator.js"> </script>
     <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"> </script>
     <script type="text/javascript" src="../../jqwidgets/jqxinput.js"> </script>
     <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"> </script>
     <script type="text/javascript">
        $(document).ready(function ()
        {
            var appointments = new Array();

            var appointment1 = {
                id: "id1",
                description: "George brings projector for presentations.",
                location: "",
                subject: "Fashion Expo",
                calendar: "East Coast Events",
                start: new Date(2015, 10, 15, 9, 0, 0),
                end: new Date(2015, 10, 18, 16, 0, 0)
            }

            var appointment2 = {
                id: "id2",
                description: "",
                location: "",
                subject: "Cloud Data Expo",
                calendar: "Middle West Events",
                start: new Date(2015, 10, 20, 10, 0, 0),
                end: new Date(2015, 10, 22, 15, 0, 0)
            }

            var appointment3 = {
                id: "id3",
                description: "",
                location: "",
                subject: "Digital Media Conference",
                calendar: "West Coast Events",
                start: new Date(2015, 10, 23, 11, 0, 0),
                end: new Date(2015, 10, 28, 13, 0, 0)
            }

            var appointment4 = {
                id: "id4",
                description: "",
                location: "",
                subject: "Modern Software Development Conference",
                calendar: "West Coast Events",
                start: new Date(2015, 10, 10, 16, 0, 0),
                end: new Date(2015, 10, 12, 18, 0, 0)
            }

            var appointment5 = {
                id: "id5",
                description: "",
                location: "",
                subject: "Marketing Future Expo",
                calendar: "Middle West Events",
                start: new Date(2015, 10, 5, 15, 0, 0),
                end: new Date(2015, 10, 6, 17, 0, 0)
            }

            var appointment6 = {
                id: "id6",
                description: "",
                location: "",
                subject: "Future Computing",
                calendar: "East Coast Events",
                start: new Date(2015, 10, 13, 14, 0, 0),
                end: new Date(2015, 10, 20, 16, 0, 0)
            }
            appointments.push(appointment1);
            appointments.push(appointment2);
            appointments.push(appointment3);
            appointments.push(appointment4);
            appointments.push(appointment5);
            appointments.push(appointment6);

            // prepare the data
            var source =
                {
                    dataType: "array",
                    dataFields: [
                        { name: 'id', type: 'string' },
                        { name: 'description', type: 'string' },
                        { name: 'location', type: 'string' },
                        { name: 'subject', type: 'string' },
                        { name: 'calendar', type: 'string' },
                        { name: 'start', type: 'date' },
                        { name: 'end', type: 'date' }
                    ],
                    id: 'id',
                    localData: appointments
                };
            var adapter = new $.jqx.dataAdapter(source);
                        
            var cancelButton;
            var deleteButton;
            var saveButton;
            
            var subject;
            var location;

            $("#scheduler").jqxScheduler({
                date: new $.jqx.date(2015, 11, 23),
                width: 850,
                height: 600,
                source: adapter,
                showLegend: true,
                // called when the dialog is craeted.
                editDialogCreate: function (dialog, fields, editAppointment)
                {
                    // hide repeat option
                    fields.repeatContainer.hide();
                    // hide status option
                    fields.statusContainer.hide();
                    // hide timeZone option
                    fields.timeZoneContainer.hide();
                    // hide color option
                    fields.colorContainer.hide();
                    //////
                    // hide color option
                    fields.colorContainer.hide();
                    // hide color option
                    fields.colorContainer.hide();

                    fields.fromContainer.hide();
                    fields.toContainer.hide();
                    fields.resourceContainer.hide();
                    fields.allDayContainer.hide();
                    fields.descriptionContainer.hide();

                    fields.subjectLabel.html("Title");
                    fields.locationLabel.html("Where");

                    var myButtons = fields.buttons[0];
                    cancelButton = myButtons.children[0];
                    deleteButton = myButtons.children[1];
                    saveButton = myButtons.children[4];

                    subject = fields.subject.jqxValidator({
                        rules: [{ input: fields.subject, message: 'Title is required!', action: 'blur', rule: 'required' }]
                    });
                    location = fields.location.jqxValidator({
                        rules: [{ input: fields.location, message: 'Location is required!', action: 'blur', rule: 'required' }]
                    });

                    $(saveButton).jqxButton({ disabled: true });
                                        
                    subject.on('keyup', function (event)
                    {
                        var resultSubject = subject.jqxValidator('validate');
                        var validateLocation = 0  < location[0].value.length;
                        var result = resultSubject && validateLocation;
                        if (result) {
                            $(saveButton).jqxButton({ disabled: false });
                        } else {
                            $(saveButton).jqxButton({ disabled: true });
                        }
                    });

                    location.on('keyup', function (event)
                    {
                        var resultLocation = location.jqxValidator('validate');
                        var validateSubject = 0  < subject[0].value.length;
                        var result = resultLocation && validateSubject;
                        if (result) {
                            $(saveButton).jqxButton({ disabled: false });
                        } else {
                            $(saveButton).jqxButton({ disabled: true });
                        }
                    });
                },
                /**
                 * called when the dialog is opened. Returning true as a result disables the built-in handler.
                 * @param {Object} dialog - jqxWindow's jQuery object.
                 * @param {Object} fields - Object with all widgets inside the dialog.
                 * @param {Object} the selected appointment instance or NULL when the dialog is opened from cells selection.
                 */
                editDialogOpen: function (dialog, fields, editAppointment)
                {
                },
                /**
                 * called when the dialog is closed.
                 * @param {Object} dialog - jqxWindow's jQuery object.
                 * @param {Object} fields - Object with all widgets inside the dialog.
                 * @param {Object} the selected appointment instance or NULL when the dialog is opened from cells selection.
                 */
                editDialogClose: function (dialog, fields, editAppointment)
                {
                },
                /**
                * called when a key is pressed while the dialog is on focus. Returning true or false as a result disables the built-in keyDown handler.
                * @param {Object} dialog - jqxWindow's jQuery object.
                * @param {Object} fields - Object with all widgets inside the dialog.
                * @param {Object} the selected appointment instance or NULL when the dialog is opened from cells selection.
                * @param {jQuery.Event Object} the keyDown event.
                */
                editDialogKeyDown: function (dialog, fields, editAppointment, event)
                {
                },
                resources:
                {
                    colorScheme: "scheme01",
                    dataField: "calendar",
                    source: new $.jqx.dataAdapter(source)
                },
                appointmentDataFields:
                {
                    from: "start",
                    to: "end",
                    id: "id",
                    description: "description",
                    location: "place",
                    subject: "subject",
                    resourceId: "calendar"
                },
                view: "monthView",
                views:
                [
                    'dayView',
                    'weekView',
                    'monthView'
                ]
            });
        });
     </script>
 </head>
 <body class='default'>
     <div id="scheduler"> </div>
 </body>
 </html>

(it is based on the “Edit Dialog” demo)

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

March 5, 2018 at 7:36 am Prevent Appointment Add with Validation Error #99023

Henley

Participant

Hi Hristo Hristov,

The solution works great. Thanks a lots.

Best Regards,
Henley

Author

Posts

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

You must be logged in to reply to this topic.