AJAX 请求将空表单数据发送到 PHP

Question

This is the code which sends data to the database. It works correctly when I filled form field and click the 'Add Record' button. It inserts the data successfully in the database.

However the main problem is that if the form field is empty and then I click the button, it sends empty data to the database.

 function addRecord() { var formData = new FormData($("#form1")[0]); //It automatically collects all fields from form $.ajax({ url: "ajax/EditDeleteLecture.php", type: "post", data: formData, async: false, cache: false, contentType: false, processData: false, success: function(output) { alertify.set('notifier', 'delay', 3); alertify.set('notifier', 'position', 'top-right'); alertify.success('Data Inserted Successfully'); readRecords(); $('#form1').trigger("reset"); } }); }

Answer 1

you have 3 places where you can tackle empty data issue before saving to database

1- Put required attribute in your input elements so that user can not submit empty fields.

2- validate your form data in java-script function addRecord() before making ajax request. if the validation is complete send ajax call else show message to user to fill the data.

3- validate your data that you received in $_POST variable and if fields are empty, send error message back in ajax response and show error to user.

Answer 2

When You get form data value while you should the form field value is empty or not... or use print_r($_POST) data..

/* on submitting my form */

  $( '#myform' ).submit(function() {

               var errors = [];

        /*     else if Textarea is empty display message error */
               if($('#myform textarea').val()=="") {  
                    errors[errors.length] = 'enter your message';
                }

        /*      if radio button is not being selected display message error */
                if (!$(":radio:checked").attr('checked')) {
                   errors[errors.length] = 'select a radio';
                }

                if(errors.length > 0){
                    var errMsg = "Please "

                    for(e = 0; e < errors.length-1; e++){
                        errMsg += errors[e]+", ";
                    }

                     errMsg = errMsg.substr(0, errMsg.length -2)+" and "+errors[errors.length-1];
                     $('#errors').empty().text(errMsg);
                     return false;
                }

        /*          Everthing is good display success message and add SENDING class to submit button */
                    else {
                        $('#myform :submit').addClass('sending').html('Sending message...');
                        $('#errors').empty().text('All Good :D');
                    }
                return false;
            });
        });

Answer 3

Make sure to set the contentType property to "application/x-www-form-urlencoded" in order to parse this in the backend server.