JQuery：JQueryの検証の前にフォームを送信する理由

Question

私はいくつかの入力がある& selectのWebフォームを持っています。これらのフィールドのデータを送信するAjaxがあります。私はsubmit.pleaseヘルプの前に検証をチェックするために強制的に検証することができます。

function validate_fields() { 

    var empty_inputs = $('.mandatory').filter(function() { 
     return !$(this).val(); 
    }).length; 
    //Checking if any Empty input or select that has class mandatory 
    if (empty_inputs > 0) { 
     $('form').find('input.mandatory, select.mandatory').each(function() { 
      if ($(this).val() == '' || $(this).val() == null) { //Change the color if empty input or select 
       $(this).css('background-color', '#FFCECE'); 
      } else { 
       $(this).css('background-color', 'transparent'); 
      }; 

     }); 
     return false; 
    } else { 
     return true; 
    } 

} 

$('#button_save').click(function() { 

      $("form").on("submit", function(event) { 

       var status; 
       status = validate_fields(); 
       // if fuction validate_fields return false then Stop submit 
       if (status == false) { 
        return false; 
       } 

       var dt = $(this).serializeArray(); 
       event.preventDefault(); 

       //This Ajax Post the Input data if validation return true. 
       $.ajax({ 

        url: 'send_data.php', 
        type: "post", 
        async: true, 
        data: dt, 
        dataType: 'html', 
        contentType: 'application/x-www-form-urlencoded; charset=UTF-8', 
        success: function(data) { 

        }, 
        error: function(jqXHR, textStatus, errorThrown) { 
         console.log(textStatus, errorThrown); 

        } 

       }); 

      }); 

Answer 1

**you can use this as a Template** 

// Wait for the DOM to be ready 
$(function() { 
    // Initialize form validation on the registration form. 
    // It has the name attribute "registration" 
    $("form[name='registration']").validate({ 
    // Specify validation rules 
    rules: { 
     // The key name on the left side is the name attribute 
     // of an input field. Validation rules are defined 
     // on the right side 
     firstname: "required", 
     lastname: "required", 
     email: { 
     required: true, 
     // Specify that email should be validated 
     // by the built-in "email" rule 
     email: true 
     }, 
     password: { 
     required: true, 
     minlength: 5 
     } 
    }, 
    // Specify validation error messages 
    messages: { 
     firstname: "Please enter your firstname", 
     lastname: "Please enter your lastname", 
     password: { 
     required: "Please provide a password", 
     minlength: "Your password must be at least 5 characters long" 
     }, 
     email: "Please enter a valid email address" 
    }, 
    // Make sure the form is submitted to the destination defined 
    // in the "action" attribute of the form when valid 
    submitHandler: function(form) { 
     form.submit(); 
    } 
    }); 
}); 

Answer 2

私は何をしなければならないことは、以下のように属性のフォームを検証する前に、フォームのデフォルトの動作を防止するため、コードの順序を変更だと思います。ここでは

はコードです。

$('#button_save').click(function() { 

      $("form").on("submit", function(event) { 
       event.preventDefault(); 
       var status; 
       status = validate_fields(); 

.......... 
    }); 

}); 

Answer 3

ボタンのクリックイベントを削除して、フォーム送信イベントを直接使用することができます。

HTML

<form method="post"> 
    <input type="text" class="mandatory"/> 
    <select class="mandatory"> 
    <option>One</option> 
    <option>Two</option> 
    </select> 

    <button type="submit">Submit</button> 
</form> 

JS

$(function() { 

    function validate_fields() { 

    var empty_inputs = $('.mandatory').filter(function() { 
     return !$(this).val(); 
    }).length; 
    //Checking if any Empty input or select that has class mandatory 
    if (empty_inputs > 0) { 
     $('form').find('input.mandatory, select.mandatory').each(function()  { 
      if ($(this).val() == '' || $(this).val() == null) { //Change the color if empty input or select 
       $(this).css('background-color', '#FFCECE'); 
      } else { 
       $(this).css('background-color', 'transparent'); 
      }; 

     }); 
     return false; 
    } else { 
     return true; 
    } 

    } 

    $("form").on("submit", function(event) { 
    var status; 
    status = validate_fields(); 

    // if fuction validate_fields return false then Stop submit 
    if (status == false) { 
     return false; 
    } 

    var dt = $(this).serializeArray(); 
    event.preventDefault(); 


    //This Ajax Post the Input data if validation return true. 
    $.ajax({ 

     url: 'send_data.php', 
     type: "post", 
     async: true, 
     data: dt, 
     dataType: 'html', 
     contentType: 'application/x-www-form-urlencoded; charset=UTF-8', 
     success: function(data) { 

     }, 
     error: function(jqXHR, textStatus, errorThrown) { 
     console.log(textStatus, errorThrown); 

     } 

    }); 

    }); 
}); 

（テキストボックスヴァルに来ているものを確認してください）と値の長さを検証し、あなたのようにしてください。このhttps://jsfiddle.net/gxj3vL5c/3/