[英]How do I validate form with multiple tabs?
所以我有一個包含三個選項卡的注冊表。 第一個標簽是用戶可以輸入email
、 password
和confirm password
,第二個標簽是他們的詳細信息,如地址、手機號碼、狀態等,第三個標簽是用戶必須同意條款和條件並提供數字簽名.
我可以打開任一選項卡,但我喜歡不填寫某些字段,但是當我單擊注冊按鈕(在第三個選項卡中)時,它應該執行客戶端驗證以確保輸入所有字段和密碼/確認密碼匹配。 例如,任何未顯示的字段都應通知用戶。
代碼:
<div>
<div class="card border-rounded-0 bg-bujishu-gold guests-card">
<h5 class="text-center bujishu-gold form-card-title">Registration</h5>
<ul class="nav nav-tabs nav-fill" role="tablist">
<li class="nav-item active">
<a class="nav-link register-tab-active active" id="home-tab" data-toggle="tab" href="#registration" role="tab" aria-controls="registration" aria-selected="true">Registration</a>
</li>
<li class="nav-item">
<a class="nav-link register-tab-active" id="profile-tab" data-toggle="tab" href="#information" role="tab" aria-controls="profile" aria-selected="false">Information</a>
</li>
<li class="nav-item">
<a class="nav-link register-tab-active" id="agreement-tab" data-toggle="tab" href="#agreement" role="tab" aria-controls="agreement" aria-selected="false">Agreement</a>
</li>
</ul>
<div class="card-body">
<!-- Dealer Registration Form -->
<form method="POST" action="{{ route('register') }}">
@csrf
<div class="tab-content" id="myTabContent">
<!-- Registration Tab-->
<div class="tab-pane fade show active" id="registration" role="tabpanel" aria-labelledby="registration-tab">
<h5 class="text-center" style="background-color: #303030; color: #ffffff; padding: .5rem; border: 1px solid #e5e5e5;">Account Particulars</h5>
<div class="form-row">
<div class="form-group col-md-12">
<label for="email">Email</label>
<input type="email" name="email" class="form-control" required id="email" placeholder="Email">
</div>
<div class="form-group col-md-12">
<label for="password">Password</label>
<input type="password" name="password" class="form-control" required id="password">
</div>
<div class="form-group col-md-12">
<label for="password-confirm">Confirm Password</label>
<input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
</div>
</div>
<!-- Next Button -->
<div class="text-right">
<!-- <a class="btn btn-secondary next-button" id="information-tab" data-toggle="tab" href="#information" role="tab" aria-controls="profile" aria-selected="false">Next</a> -->
<a class="btn btn-secondary next-button">Next</a>
</div>
</div>
<!-- Information Tab -->
<div class="tab-pane fade" id="information" role="tabpanel" aria-labelledby="information-tab">
<!-- Personal Particulars -->
<h5 class="text-center" style="background-color: #303030; color: #ffffff; padding: .5rem; border: 1px solid #e5e5e5;">Personal Particulars</h5>
<div class="form-row">
<div class="form-group col-md-6">
<label for="full_name">Full Name (as per NRIC)</label>
<input type="text" name="full_name" class="form-control" id="full_name" placeholder="Full Name">
</div>
<div class="form-group col-md-6">
<label for="nric">NRIC Number</label>
<input type="text" name="nric" class="form-control" id="nric" placeholder="NRIC Number">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="address_1">Address Line 1</label>
<input type="text" name="address_1" id="address_1" class="form-control" placeholder="Residential Address Line 1">
</div>
<div class="form-group col-md-12">
<label for="address_1">Address Line 2</label>
<input type="text" name="address_2" id="address_2" class="form-control" placeholder="Residential Address Line 1">
</div>
<div class="form-group col-md-12">
<label for="address_1">Address Line 3</label>
<input type="text" name="address_3" id="address_3" class="form-control" placeholder="Residential Address Line 1">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="postcode">Postcode</label>
<input type="text" name="postcode" id="postcode" class="form-control" placeholder="Postcode">
</div>
<div class="form-group col-md-6">
<label for="city">City</label>
<input type="text" name="city" id="city" class="form-control" placeholder="City">
</div>
<div class="form-group col-md-12">
<label for="state">State</label>
<select name="state" id="state" class="form-control">
<option disabled selected>Choose your state..</option>
@foreach($states as $state)
<option class="text-capitalize" value="{{ $state->id }}">{{ $state->name }}</option>
@endforeach
</select>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="contact_number_home">Contact Number (Home)</label>
<input type="text" name="contact_number_home" class="form-control" placeholder="Home Contact Number">
</div>
<div class="form-group col-md-6">
<label for="contact_number_mobile">Contact Number (Mobile)</label>
<input type="text" name="contact_number_mobile" class="form-control" placeholder="Mobile Contact Number">
</div>
</div>
<div class="form-row">
<div class="col-12">
<label style="display: block;" for="existing_customer_options">Are you an existing Destiny Code customer?</label>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="existing_customer" value="0" checked>
<label class="form-check-label" for="existing_customer">No</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="existing_customer" value="1">
<label class="form-check-label" for="existing_customer">Yes</label>
</div>
</div>
</div>
<!-- Next Button -->
<div class="text-right">
<!-- <a class="btn btn-secondary next-button" id="agreement-tab" data-toggle="tab" href="#agreement" role="tab" aria-controls="profile" aria-selected="false">Next</a> -->
<a class="btn btn-secondary next-button">Next</a>
</div>
</div>
我嘗試在輸入上使用required
但似乎沒有做任何事情。 從我看來,似乎 jQuery 是唯一的選擇,但我想知道有沒有更簡單的方法來實現這一點?
我在我的手機上,所以你的代碼基本上是不可讀的,因為手機格式很奇怪。 你可以做的是,當你切換標簽時,你實際上只是讓一些隱藏的元素顯示出來,而一些元素隱藏在同一個表單中。 這在 JavaScript 中很容易做到。 然后你可以將它們全部設置為 required 和 tada。 不是 100% 確定這是否有效,但我認為它會。 確保使用 html hidden 屬性而不是 css display none。
這是使用 JQuery 驗證匹配密碼的示例。
我正在使用.keyup(function(){})
設置一個函數,然后我正在設置一個條件來檢查每個 id 標簽的值,如果它們不匹配,我將返回一條帶有紅色和 bg 的錯誤消息給用戶警告如果不匹配,我也禁用了提交按鈕,因此他們在解決問題之前無法提交表單。 然后,如果有匹配項,我將返回一條帶有綠色和 bg 的成功消息,並刪除 disabled 屬性,以便可以提交表單。
重要說明:數據庫或登錄的驗證表單應該在后端完成,而不是前端。 前端應僅用作驗證的第一步。 請記住,JS 可以被禁用並使您的驗證毫無價值。 使用 PHP 或 ASP 進行最終驗證!
$("#password").keyup(function() { // we fire on the keyup event //compare the values of the two passwords using .val() and their ids if ($("#password").val() != $("#confirm_password").val()) { // if they do not match we add an error message to the div #msg // we also remove potential latent classes and add new class to get warning font color and bg color $("#msg").html("Passwords do not match").removeClass("alert-success").addClass("alert alert-danger"); // disable and style the submit button using .prop() and remove/addClass() $("#enter").prop('disabled', true); $("#enter").removeClass("alert-success").addClass("alert alert-danger"); } else { // On success we add success msg and switch styles to note success in green $("#msg").html("Passwords matched").removeClass("alert-danger").addClass("alert alert-success"); // Turn the submit back on by removing the disabled attr $("#enter").prop('disabled', false); $("#enter").removeClass("alert-danger").addClass("alert alert-success"); } }); //rinse and repeat for the #confirm-password tag $("#confirm_password").keyup(function() { if ($("#password").val() != $("#confirm_password").val()) { $("#msg").html("Passwords do not match").removeClass("alert-success").addClass("alert alert-danger"); $("#enter").prop('disabled', true); $("#enter").removeClass("alert-success").addClass("alert alert-danger"); } else { $("#msg").html("Passwords matched").removeClass("alert-danger").addClass("alert alert-success"); $("#enter").prop('disabled', false); $("#enter").removeClass("alert-danger").addClass("alert alert-success"); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <label for="usr_password" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input class="form-control" id="password" type="password" name="usr_password" placeholder="PASSWORD" required> </div> <label for="confirm_password" class="col-sm-2 control-label">Confirm Password</label> <div class="col-sm-10"> <input class="form-control" id="confirm_password" type="password" name="confirm_password" placeholder="CONFIRM PASSWORD" required> </div> <div id="msg"></div> <input type="submit" value="Enter Password" id="enter">
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.