使用空白输入阻止ajax提交并选择

时间:2016-11-15 14:33:23

标签: javascript jquery ajax

我被困在这里:

//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 inputsselects点击按钮它也会将数据插入数据库而不会阻止空白输入或选择......

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

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

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

并且没有工作..在这种情况下它会阻止空输入但是当我填充输入并点击按钮时没有任何反应..

2 个答案:

答案 0 :(得分:1)

你必须选择你的表单,而不是你的按钮来附加提交监听器,而不是:

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

更改为:

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

答案 1 :(得分:1)

首先,而不是使用 .val()对于您拥有的每个输入,您只需使用var data = $("#myform").serialize();,您将在表单中包含所有提交的输入,您可以执行console.log(data);,然后您将看到结果。

另一件事是:如果你想验证数据,你需要注册表单提交,而不是点击按钮,所以,而不是使用$("#savebutton").click(function(){});使用$("#myform").on('submit', function(){});和所有的html输入应该是这样的:

<input type="text" name="stack" placeholder="Name" required>

它开始工作了。