jQuery Post和HTML表单验证

Question

I $.post(); correctly some forms elements with jquery. Now, some of these elements are "required", of course I can test server side if they are correctly filled and return back a response, but it would be nice if I could trigger the classic HTML required error, where it also evidences the missing fields. Of course I'll test them serverside after, but at least I don't have to do the highlighting with javascript.

I don't like creating an hidden post button. Also because I post more than one form at once

formX.serialize() + formX+1.serialize() + ...

I'd like to know if there is a way. Thanks to you.

Answer 1

You can also use the serializeArray method in jQuery as well.: https://api.jquery.com/serializeArray/

Example:

$(document).ready(function() {

var oParams = {
    'invalid_msgs' : {
      'title' : 'Kindly provide the title',
      'body' : 'Kindly provide the body',
      'type' : 'Kindly provide the type'
  },
};

$('#frm-add-content').submit(function(event) {
    event.preventDefault();
    var oFormData = $(this).serializeArray();
    // console.log(oFormData);

    for (var iIndex in oFormData) {

        if (oFormData.hasOwnProperty(iIndex) === true) {
            var sInputKeys = oFormData[iIndex].name; // (e.g title)
            var sInputValues = oFormData[iIndex].value; // (e.g Title 1)

            /* If in case there are [input] fields that
             * are not required in this case, You can set
             * condition like this
             * In this case, The input that had the [author] 
             * name attribute will be 'exempted' for validation
             */
            var aNotRequiredInputKeys = ['author'];
            if ($.inArray(sInputKeys, aNotRequiredInputKeys) < 0) {
                if ($.trim(sInputValues) === '') {
                    alert(oParams.invalid_msgs[sInputKeys]);
                    return false;
                }
            }

        }
    }

});

});

Here's a jsfiddle for reference: https://jsfiddle.net/xdp70kt3/2/

Hope this will guide you well.

On the other note, You can also add required html attribute as well if you only want to check if the values were inputted.

Answer 2

You can use this jQuery plugin to validate your form: https://jqueryvalidation.org

You can do something like this:

$("#formX").validate({
   submitHandler: function(form) {
      $(form).ajaxSubmit();
   }
});