prevent call ajax api if required input is empty

[Ali Ossaily]

      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

                               

                           

        Submit

     $("#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]

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

 

                    }); 

            

        } 

      } 

 

Sample: https://jsplayground.syncfusion.com/0bnj2ypx  

 

Please check the above provided sample and get back to us, if you require any further assistance. 

 

Regards, 

Ashokkumar B. 

[Ali Ossaily]

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

Regards,

[Ashokkumar Balasubramanian]

Hi Ali, 

 

Most Welcome. 

 

Please let us know, if you need any further assistance. 

 

Regards, 

Ashokkumar B.