хорошо, для начала я использую https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_form_steps в качестве основы моей формы с изменениями (см. ниже) проверка работает правильно, если поля пусты, кнопка «Далее» не работает, однако, если я попытаюсь добавить шаблон требуется для пароля, он ничего не делает. кто-нибудь может помочь? примечание: у меня есть второй скрипт "vue.js", который показывает, какие из требований выполнено (также пришлось удалить кусок кода из последнего шага из-за ограничения количества слов
<form id="regForm" action="/action_page.php">
<!-- One "tab" for each step in the form: -->
<div class="tab">
<h3 class="text-center">Lets Get You Registered</h3>
<div class=" pt-25 pb-30 container">
<div class="col-md-5 col-sm-6 ">
<h3>Billing Information</h3>
<!--<div class="choose-us-image">
<img src="images/other/left.png" alt="">
</div>-->
<ul>
<li style="width: 48%"><label>First Name:</label><br><input type="textt" name="FirstName"></li>
<li style="width: 49%"><label style="padding-top:7px;">Last Name:</label><br><input type="textt" Name="LastName"></li>
<li style="width: 98%"><label style="padding-top:7px;">Address:</label><br><input type="textt" name="Address"></li>
<!-- <li style="width: 65%"><label style="padding-top:7px;">Address 2:</label><br><input type="textt" id="address2" name="adress2" style="display: none;" ></li>-->
<li><label style="padding-top:7px;">City:</label><br> <input style="width:125px; " type="textt" name="City"></li>
<li ><label style="padding-top:7px;">State:</label><br> <input style="width:65px; " maxlength="2" type="textt" name="State"></li>
<li><label style="padding-top:7px;">Zip Code:</label><br> <input style="width:76px; " type="textt"></li>
<li style="width: 35%"><label>Phone Number:</label><br><input type="textt"></li>
</ul>
</div>
<div class="col-md-5 col-sm-6 pull-right ">
<h3>Account Setup</h3>
<!--<div class="choose-us-image">
<img src="images/other/left.png" alt="">
</div>-->
<ul>
<li style="width: 100%"><label style="padding-top:7px;">Email:</label><br><input type="textt" name="Email"></li>
<li style="width: 100%"><label>Username</label><br><input type="textt" name="Username"></li>
<li style="width: 100%"><div id="app" >
<label class="
" for="password">Password</label>
<input placeholder="Enter your password" name="password" id="pass" class="frmField" type="password" @input="password_check" v-model="message" required/>
<label class="contained">Show Password
<input type="checkbox" class="checkbox" onclick="myFunction()"/>
<span class="checkmark"></span> <a style="font-size: 10px; float: right;" href="#containx" data-reveal-id="exampleModal"> Already Have a account? Sign in <u>here</u></a></label>
<p class="frmValidation" :class="{'frmValidation--passed' : message.length > 7}"><i class="frmIcon fas" :class="message.length > 7 ? 'fa-check' : 'fa-times'"></i> Longer than 7 characters</p>
<p class="frmValidation" :class="{'frmValidation--passed' :has_uppercase }"><i class="frmIcon fas" :class="has_uppercase ? 'fa-check' : 'fa-times'"></i> Has a capital letter</p>
<p class="frmValidation" :class="{'frmValidation--passed' :has_lowercase }"><i class="frmIcon fas" :class="has_lowercase ? 'fa-check' : 'fa-times'"></i> Has a lowercase letter</p>
<p class="frmValidation" :class="{'frmValidation--passed' : has_number }"><i class="frmIcon fas" :class="has_number ? 'fa-check' : 'fa-times'"></i> Has a number</p>
<p class="frmValidation" :class="{'frmValidation--passed' : has_special }"><i class="frmIcon fas" :class="has_special ? 'fa-check' : 'fa-times'"></i> Has a special character</p>
</div></li>
</ul>
</div>
</div>
<div style="overflow:auto;">
<div>
<button type="button" id="prevBtn" onclick="nextPrev(-1)" style="float:left;">Previous</button>
<button type="button" id="nextBtn" onclick="nextPrev(1)" style="float:right;">Next</button>
</div>
</div>
</div>
<div class="tab">
<h3 class="text-center">Next, Lets Choose a plan</h3>
<div class="row ptb-40">
<!-- Pricing table single -->
<div class="col-md-3 col-sm-6 col-xs-12 res-pb-xs-30">
<div class="pricing-table-single white-bg">
<div class="table-category text-center">
<h6>Silver pack</h6>
<h1>$30<span> / month</span></h1>
</div>
<div class="pricing-list text-center">
<ul>
<li><a href="#">30 messages</a></li>
<li><a href="#">One number</a></li>
<li><a href="#">Null</a></li>
<li><a href="#">Null</a></li>
<li><a href="#">Null</a></li>
</ul>
</div>
<div class="order-button text-uppercase text-center" onclick="nextPrev(1)">
<a onclick="base();" >Select</a>
</div>
</div>
</div>
<!-- Pricing table single -->
<!-- Pricing table single -->
<div class="col-md-3 col-sm-6 col-xs-12 res-pb-xs-30">
<div class="pricing-table-single white-bg">
<div class="table-category text-center">
<h6>gold pack</h6>
<h1>$50<span> / month</span></h1>
</div>
<div class="pricing-list text-center">
<ul>
<li><a href="#">50 messages</a></li>
<li><a href="#">Two Numbers</a></li>
<li><a href="#">Null</a></li>
<li><a href="#">Null</a></li>
<li><a href="#">Null</a></li>
</ul>
</div>
<div class="order-button text-uppercase text-center" onclick="nextPrev(1)">
<a onclick="pro();">Select</a>
</div>
</div>
</div>
<!-- Pricing table single -->
<!-- Pricing table single -->
<div class="col-md-3 col-sm-6 col-xs-12 res-pb-xs-30">
<div class="pricing-table-single white-bg">
<div class="table-category text-center">
<h6>platinum pack</h6>
<h1>$90<span> / month</span></h1>
</div>
<div class="pricing-list text-center">
<ul>
<li><a href="#">Unlimited Messages</a></li>
<li><a href="#">Unlimited Numbers</a></li>
<li><a href="#">Null</a></li>
<li><a href="#">Null</a></li>
<li><a href="#">Null</a></li>
</ul>
</div>
<div class="order-button text-uppercase text-center" onclick="nextPrev(1)">
<a onclick="ent();">Select</a>
</div>
</div>
</div>
<!-- Pricing table single -->
<!-- Pricing table single -->
<div class="col-md-3 col-sm-6 col-xs-12 res-pb-xs-30">
<div class="pricing-table-single white-bg">
<div class="table-category text-center">
<h6>platinum pack</h6>
<h1>$90<span> / month</span></h1>
</div>
<div class="pricing-list text-center">
<ul>
<li><a href="#">Unlimited Messages</a></li>
<li><a href="#">Unlimited Numbers</a></li>
<li><a href="#">Null</a></li>
<li><a href="#">Null</a></li>
<li><a href="#">Null</a></li>
</ul>
</div>
<div class="order-button text-uppercase text-center" onclick="nextPrev(1)">
<a onclick="payg();">Select</a>
</div>
</div>
</div>
<!-- Pricing table single -->
</div>
<div style="overflow:auto;">
<div>
<button type="button" id="prevBtn" onclick="nextPrev(-1)" style="float:left;">Previous</button>
</div>
</div>
</div>
<div class="tab">
<h3 class="text-center">Finally, Lets take care of payment</h3>
<div class=" pt-25 pb-30 container">
<div class="col-md-5 col-sm-6 ">
<h3>Billing Information</h3>
<!--<div class="choose-us-image">
<img src="images/other/left.png" alt="">
</div>-->
<ul>
<li style="width: 48%"><label>First Name:</label><br><input name="BillingFirstname" type="textt"></li>
<li style="width: 49%"><label style="padding-top:7px;">Last Name:</label><br><input name="BillingLastname" type="textt"></li>
<li style="width: 98%"><label style="padding-top:7px;">Address:</label><br><input Name="Billingaddress" type="textt" class=""></li>
<!-- <li style="width: 65%"><label style="padding-top:7px;">Address 2:</label><br><input type="textt" id="address2" name="adress2" style="display: none;" ></li>-->
<li><label style="padding-top:7px;">City:</label><br> <input style="width:125px; " name="Billingcity" type="textt"></li>
<li ><label style="padding-top:7px;">State:</label><br> <input style="width:65px; " maxlength="2" type="textt" name="BillingState"></li>
<li><label style="padding-top:7px;">Zip Code:</label><br> <input style="width:76px; " type="textt" name="BillingZipcode"></li>
<li style="width: 35%"><label>Phone Number:</label><br><input type="textt" name="BillingPhone"></li>
</ul>
</div>
<div class="col-md-5 col-sm-6 pull-right ">
<h3 >Payment Information</h3>
<ul>
<li><label>Name on Card:</label><br><input type="textt" name="Nameoncard"></li>
<li style="width:187px"><label style="padding-top:7px;">Card Number</label><br><input maxlength="16" type="textt" name="Cardnumber"></li>
<li style="width:26%;padding-right:7px;"><label style="padding-top:7px;">Security Code</label><br><input maxlength="4" type="textt" name="SecurityCode"></li>
<li><label style="padding-top:7px;padding-bottom:8px;">Expiration Date</label><br><div class="custom-select" style="width:101px;" name="Expdate">
<select>
<option value="0">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="10">November</option>
<option value="10">December</option>
</select>
</div></li>
<li><div class="custom-select" style="width:75px;">
<select name="">
<option value="yr">Year</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
<option value="2031">2031</option>
<option value="2032">2032</option>
<option value="2033">2033</option>
<option value="2034">2034</option>
<option value="2035">2035</option>
<option value="2036">2036</option>
<option value="2037">2037</option>
<option value="2038">2038</option>
<option value="2039">2039</option>
<option value="2039">2040</option>
</select></div></li>
</ul>
</div>
<!--------Plan Specific-------------------->
<!----------------------------------------------------------------------
<!--------- Plan Specific END------------>
</div>
<div style="overflow:auto;">
<div>
<button type="button" id="prevBtn" onclick="nextPrev(-1)" style="float:left;">Previous</button>
<button type="button" id="nextBtn" value="submit" style="float:right;">Submit</button>
</div>
</div>
</div>
<!-- <div style="overflow:auto;">
<div>
<button type="button" id="prevBtn" onclick="nextPrev(-1)" style="float:left;">Previous</button>
<button type="button" id="nextBtn" onclick="nextPrev(1)" style="float:right;">Next</button>
</div>
</div>-->
<!-- Circles which indicates the steps of the form: -->
<div style="text-align:center;margin-top:10px;">
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
</div>
</form>
<div class="" id="containx">
<div action="/action_page.php" id="exampleModal" class="reveal-modal" style="background-color: white;">
<h1>Login</h1>
<label for="email"><b>Email</b></label>
<input type="textt" placeholder="Enter Email" name="email" required>
<label for=""><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="" required>
<button type="submit" class="btn">Login</button>
<a href="#" class="close-reveal-modal pt-10" style="float: right;"> Back to Sign-Up</a>
</div>
</div>
<script>
var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the crurrent tab
function showTab(n) {
// This function will display the specified tab of the form...
var x = document.getElementsByClassName("tab");
x[n].style.display = "block";
//... and fix the Previous/Next buttons:
if (n == 0) {
document.getElementById("prevBtn").style.display = "none";
} else {
document.getElementById("prevBtn").style.display = "inline";
}
if (n == (x.length - 1)) {
document.getElementById("nextBtn").innerHTML = "Submit";
} else {
document.getElementById("nextBtn").innerHTML = "Next";
}
//... and run a function that will display the correct step indicator:
fixStepIndicator(n)
}
function nextPrev(n) {
// This function will figure out which tab to display
var x = document.getElementsByClassName("tab");
// Exit the function if any field in the current tab is invalid:
if (n == 1 && !validateForm()) return false;
// Hide the current tab:
x[currentTab].style.display = "none";
// Increase or decrease the current tab by 1:
currentTab = currentTab + n;
// if you have reached the end of the form...
if (currentTab >= x.length) {
// ... the form gets submitted:
document.getElementById("regForm").submit();
return false;
}
// Otherwise, display the correct tab:
showTab(currentTab);
}
function validateForm() {
// This function deals with validation of the form fields
var x, y, i, valid = true;
x = document.getElementsByClassName("tab");
y = x[currentTab].getElementsByTagName("input");
// A loop that checks every input field in the current tab:
for (i = 0; i < y.length; i++) {
// If a field is empty...
if (y[i].value == "") {
// add an "invalid" class to the field:
y[i].className += " invalid";
// and set the current valid status to false
valid = false;
}
}
// If the valid status is true, mark the step as finished and valid:
if (valid) {
document.getElementsByClassName("step")[currentTab].className += " finish";
}
return valid; // return the valid status
}
function fixStepIndicator(n) {
// This function removes the "active" class of all steps...
var i, x = document.getElementsByClassName("step");
for (i = 0; i < x.length; i++) {
x[i].className = x[i].className.replace(" active", "");
}
//... and adds the "active" class on the current step:
x[n].className += " active";
}
</script>
<script> let app = new Vue({
el: '#app',
data:{
message: '',
has_number: false,
has_lowercase: false,
has_uppercase: false,
has_special: false,
},
methods: {
password_check: function () {
this.has_number = /\d/.test(this.message);
this.has_lowercase = /[a-z]/.test(this.message);
this.has_uppercase = /[A-Z]/.test(this.message);
this.has_special = /[!@#\$%\^\&*\)\(+=._-]/.test(this.message);
}
},
}); </script>