jquery - jquery 使用 val() 函数

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);
    }

});

嗨，上面代码的问题是，当我专注于输入时，添加了必须填写的所有字段的文本，以及当我专注于其他输入而不是单击单击我按钮时进行检查时。如何我修改代码以仅在单击提交时检查并仅插入一次文本（所有字段都是必需的）

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

在 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);
    }

})

;