javascript - 防止 ajax 提交空白输入和选择

Question

我被困在这里:

//Saving Data
    $('#saveButton').click(function(){

        var teamA = $('#teamA').val();
        var teamB = $('#teamB').val();
        var date = $('#date').val();
        var timeOfEvent = $('#timeOfEvent').val();
        var live = "0";
        if($("#live").is(':checked'))
            live = $('#live').val();

        $.ajax({
            url  : "ajax.php",
            type : "POST",
            async: false,
            dataType: "json",
            data :
            {
                'submitAddEvents' : 1,
                'teamA' : teamA,
                'teamB' : teamB,
                'date' : date,
                'timeOfEvent' : timeOfEvent,
                'live' : live,
            },
            success:function(data)
            {

                if(!data.success) {
                    alert(data.message);
                }else{
                    window.location = "addEvents.php";
                }

            }
        });
    });

这就是我已经拥有的..“一切”都可以，但即使有 required在inputs和selects当我单击按钮时，它将数据插入数据库，而不会阻止空白输入或选择...

我已经做了什么我放了一个<form>我改变了我的ajax

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

至

$('#saveButton').submit(function(ev){
ev.preventDefault();

并且不起作用..在这种情况下它会阻止空输入，但是当我填写输入并单击按钮时什么也不会发生..

Answer 1

您必须选择您的表单，而不是您的按钮来附加提交监听器，而不是这样:

$('#saveButton').submit(function(ev){
ev.preventDefault();

更改为:

$('#myform').submit(function(ev){
ev.preventDefault();