[英]Form validation using jquery method show() and hide()
我為用戶詳細信息制作了一個表格。 我想使用 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();
}
});
您需要在輸入字段上添加required
屬性以確保它們由用戶填寫:
<input required type="text" placeholder="first name" id="first" class="firstn" name="user">
只有HTML5支持表單元素的required
屬性。
將需要更改您的 HTML 類型並確保您的文件以以下內容開頭:
<!DOCTYPE html>
<html>
...
您可以從以下位置刪除標簽末尾的所有斜杠:
<input />
到:
<input>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.