We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Try Essential JS 2

prevent call ajax api if required input is empty

Thread ID:

Created:

Updated:

Platform:

Replies:

145903 Jul 12,2019 12:46 PM UTC Jul 16,2019 07:29 AM UTC jQuery 3
loading
Tags: ejDatePicker
Ali Ossaily
Asked On July 12, 2019 12:47 PM UTC

      I have this date picker in my form which is a required field and Submit button that call ajax api onclick using data-bind knockout 
                           
                                Date Of Birth
                               
                           
       


     $("#dateOfBirth").ejDatePicker({
                width: "100%",
                watermarkText: "Date Of Birth",
                dateFormat: 'dd MMMM yyyy',
                validationRules: { required: true },
                validationMessage: { required: "Required Date value" },             
                showFooter: false,
                displayInline: false
            });

And I have this function that call the an api to create a new client  , 

what I want is a condition to prevent the user from adding a new client if the date picker 'dateOfBirth' or any other required input is not selected or filled .

so when the user forgot to fill or select a value from input , a red color error message will be displayed under the unselected or unfilled input and the api will not be called

          self.create = function () {    
           // if (condtion) {
                $.ajax({
                    url: 'url',
                    cache: false,
                    type: 'POST',
                    contentType: 'application/json; charset=utf-8',
                    success: function (data) {
                        toastr.success("Client Added Successfully");
                    }
                }).fail(
                    function (xhr, textStatus, err) {
                        toastr.error("An error occurred while attempting to Add this client");

                    });
           // }
                       };


Ashokkumar Balasubramanian [Syncfusion]
Replied On July 15, 2019 12:39 PM UTC

Hi Ali,  
 
Good day to you. 
 
We checked your query and suggest you to check whether the datepicker input is valid through its id. If it is valid, then you can proceed with the AJAX post based on your requirement. Please refer to the following code 
 
function create() 
      { 
       if($("#dateOfBirth").valid()) 
        { 
            $.ajax({ 
                    url: 'url', 
                    cache: false, 
                    type: 'POST', 
                    contentType: 'application/json; charset=utf-8', 
                    success: function (data) { 
                        alert("Client Added Successfully"); 
                    } 
                }).fail( 
                    function (xhr, textStatus, err) { 
                        alert("An error occurred while attempting to Add this client"); 
 
                    }); 
            
        } 
      } 
 
 
Please check the above provided sample and get back to us, if you require any further assistance. 
 
Regards, 
Ashokkumar B. 


Ali Ossaily
Replied On July 16, 2019 06:57 AM UTC

Thanks a lot , that's exactly what i want and it works .

Regards,

Ashokkumar Balasubramanian [Syncfusion]
Replied On July 16, 2019 07:29 AM UTC

Hi Ali, 
 
Most Welcome. 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Ashokkumar B. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon