1. Home
  2. Forum
  3. jQuery
  4. prevent call ajax api if required input is empty

prevent call ajax api if required input is empty

      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");

                    });
           // }
                       };


3 Replies
AB Ashokkumar Balasubramanian Syncfusion Team 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. 


AO Ali Ossaily July 16, 2019 06:57 AM UTC

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

Regards,

AB Ashokkumar Balasubramanian Syncfusion Team July 16, 2019 07:29 AM UTC

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


Loader.
Up arrow icon