Question

<form id="form" action=" ">
<div class="error"><ul></ul></div>
<input type="text" id="name_2" />

<input type="text" id="age_2" />
<input type="submit" value="Click here!" />
<script>
$('#form').on('click',function($event){
    $event.preventDefault();
    var form=$(this);
    var name=form.find('#name_2').val();
    var email=form.find('#age_2').val();
    var find=form.find('p.msg');
    if(name==''&&email==''){

        $('<p></p>',{
                text:"all fields must be filled",
                class:'msg'

                }).insertBefore('#form');


    }
    else{

        console.log(name + email);
    }

});

喜上面代码的问题是当我专注于输入时，文本，所有字段都必须填充，当我专注于其他输入而不是检查我点击Click me button时我可以修改仅在单击提交时检查的代码，并且仅插入文本（仅需要所有字段）

Answer 1

如果条件为真，则使用提交处理程序而不是click() ..和return false

 $('#form').on('submit',function($event){
$event.preventDefault();
var form=$(this);
var name=form.find('#name_2').val();
var email=form.find('#age_2').val();
var find=form.find('p.msg');
if(name==''&& email==''){

    $('<p></p>',{
            text:"all fields must be filled",
            class:'msg'

            }).insertBefore('#form');
     return false

}
else{

    console.log(name + email);
}

});

Answer 2

使用表单提交事件验证表单，如果表单无效则返回false取消表单提交

此外，您可能需要将条件从name==''&&email==''更改为name=='' || email==''以验证这两个字段是否为空

$('#form').on('submit',function($event){
    $event.preventDefault();
    var form=$(this);
    var name=form.find('#name_2').val();
    var email=form.find('#age_2').val();
    var find=form.find('p.msg');
    if(name=='' || email==''){

        $('<p></p>',{
            text:"all fields must be filled",
            class:'msg'

        }).insertBefore('#form');

        return false
    }
    else{

        console.log(name + email);
    }

});

Answer 3

in html

<form id="form" action=" ">
<div class="error"><ul></ul></div>
<input type="text" id="name_2" />

<input type="text" id="age_2" />
<input type="submit" value="Click here!" id="submitbtn" />

在JS中

$('#submitbtn').on('click',function($event){
    $event.preventDefault();
    var form=$(this);
    var name=form.find('#name_2').val();
    var email=form.find('#age_2').val();
    var find=form.find('p.msg');
    if(name==''&&email==''){

        $('<p></p>',{
                text:"all fields must be filled",
                class:'msg'

                }).insertBefore('#form');


    }
    else{

        console.log(name + email);
    }

})

jquery-using val（）函数

3 个答案: