使用 jquery 方法 show() 和 hide() 进行表单验证

Question

我为用户详细信息制作了一个表格。 我想使用 jquery 隐藏和显示方法验证表单。 但是我做错了，因为所需的功能正在运行。 我哪里错了？ 我也阅读了有关此主题的其他答案，但没有完成工作。

我的表格：

 <form id="uploadimageform" method="post" enctype="multipart/form-data">
                <input type="text" placeholder="first name" id="first" class="firstn" name="user[firstname]" /><br />
                <div class="firstname23">
                <p >Please fill the first name.</p>
                </div>
                <input type="text" placeholder="last name" id="last" class="lastn" name="user[lastname]" /><br />
                <div class="lastname23">
                    <p >Please fill the Last name.</p>
                </div>
                <input type="text" maxlength="10" placeholder="contact no." id="contact" name="user[contact_number]" onkeypress="return isNumberKey(event)" /><br />
                <input  type="address" placeholder="address1" id="addr1" name="user[address1]"/><br />
                <input  type="address" placeholder="address2" id="addr2" name="user[address2]"/><br />
                <input  type="address" placeholder="street" id="strt" name="user[street]"/><br />
                <input  type="address" placeholder="street1" id="strt1" name="user[street1]"/><br />
                <input  type="address" placeholder="city" id="city" name="user[city]"/><br />
                <input  type="address" placeholder="state" id="statee" name="user[state]"/><br />
                <input  type="address" placeholder="country" id="cntry" name="user[country]" /><br />
                <input  type="email" placeholder="email" id="email" class="emailn" name="user[email]" /><br />
                <div class="email23">
                    <p >Please fill the Email.</p>
                </div>
                <input  type="password" placeholder="password" id="paswrd" class="passn" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$" name="user[password]" /><br />
                <div class="password23">
                    <p >Please fill the Password.</p>
                </div>

                <select name="user[gender]" id="gndr">
                    <option>Gender</option>
                    <option value="Male">Male</option>
                    <option value="Female">Female</option>
                </select><br />
                <input type="file" name="user_photo" id="user_photo" /><br>
                <div class="btn btn-primary" type="submit" id="addbutton" onclick="">Submit </div>
            </form>

我的 Jquery 验证：

$(".firstname23").hide();
        $(".lastname23").hide();
        $(".email23").hide();
        $(".password23").hide();

        $("#addbutton").click(function(){
            alert($(".firstn").val())
        if ($(".firstn").val() == '') {
            $(".firstname23").show();
        }
        if ($(".lastn").val() == '') {
            $(".lastname23").show();
        }
        if ($(".emailn").val() == '') {
            $(".email23").show();
        }
        if ($(".passn").val() == '') {
            $(".password23").show();
        }
        });

Answer 1

您需要在输入字段上添加required属性以确保它们由用户填写：

<input required type="text" placeholder="first name" id="first" class="firstn" name="user">

只有HTML5支持表单元素的required属性。

将需要更改您的 HTML 类型并确保您的文件以以下内容开头：

<!DOCTYPE html>
<html>
...

您可以从以下位置删除标签末尾的所有斜杠：

<input />

到：

<input>

使用 jquery 方法 show() 和 hide() 进行表单验证

问题描述

1 个解决方案

解决方案1
1 2018-02-11 16:24:10

使用 jquery 方法 show() 和 hide() 进行表单验证

问题描述

1 个解决方案

解决方案1 1 2018-02-11 16:24:10

解决方案1
1 2018-02-11 16:24:10