jQuery UI Widgets Forums Scheduler Prevent Appointment Add with Validation Error

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

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

  • 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.


    Stanislav
    Participant

    Hello Henley,

    Take a look at this forum post: Link

    Best Regards,
    Stanislav

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


    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’ }]
    });


    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/


    Henley
    Participant

    Hi Stanislav,

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


    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

    • This reply was modified 6 years, 3 months ago by  Hristo.

    Henley
    Participant

    Hi Hristo Hristov,

    The solution works great. Thanks a lots.

    Best Regards,
    Henley

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

You must be logged in to reply to this topic.