ФОРМ Индикатор выполнения с проверкой флажка - PullRequest
Новая
       2

ФОРМ Индикатор выполнения с проверкой флажка

2 голосов
/ 04 ноября 2019

Что мне нужно будет добавить в скрипт jQuery, чтобы он также обнаруживал флажок CHECKED.

По сути, atm, когда кто-то вводит правильную информацию, заполняется индикатор выполнения. Однако этого не происходит для флажка.

Просто введите что-то в поле ввода имени, и вы поймете, что я имею в виду.

Я использовал код из https://css-tricks.com/display-form/

progress {
width: 100%;
background: #333;
height: 20px;
border: 0;
}

::-webkit-progress-value {
  transition: width 1s;
}
<head><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script></head>
<progress max="100" value="0" id="progress"></progress>
    <div class="progress-message" id="progress-message">This form, it wants you.</div>  
    <form action="#" id="contactForm" method="post">
<input type="text" name="name" id="name" title="Name" value class="input-text reqyured-entry" placeholder="Your Name:" required="required" autocomplete="off" />
<input type="email" name="email" id="email" title="Email" value class="input-text required-entry validate-email" placeholder="Email Address:" required="required" pattern="^\S+@\S+\.\S+$" autocomplete="off" />
<input type="tel" name="telephone" id="telephone" title="Telephone" value class="input-text" placeholder="Telephone No:" required="required" min="11" pattern="[-+]?[0-9]*" autocomplete="off" />  
<textarea type="text" name="comment" id="comment" title="Comment" class="required-entry input-text" placeholder="Type Your Message:" style="resize: vertical;" min="10" rows="7" required="required"></textarea>
<input type="checkbox" required="required" name="terms" id="terms"> I agree to the <a href="#"><u>Terms and Conditions</u></a><br><br>       
<input type="submit" value="SEND" title="Submit" class="button"/>
</form>
  </div>
</div>

<script>
$("#contactForm input, #contactForm textarea").keyup(function() {
  
var numValid = 0;
$("#contactForm input[required],#contactForm textarea[required]").each(function() {
    if (this.validity.valid) {
        numValid++;
    }
});

var progress = $("#progress"),
    progressMessage = $("#progress-message");

if (numValid == 0) {
    progress.attr("value", "0");
    progressMessage.text("This form, it wants you.");
}
if (numValid == 1) {
    progress.attr("value", "20");
    progressMessage.text("There you go, great start!");
}
if (numValid == 2) {
    progress.attr("value", "40");
    progressMessage.text("Nothing can stop you now.");
}
if (numValid == 3) {
    progress.attr("value", "60");
    progressMessage.text("You're basically a hero, right?");
}
if (numValid == 4) {
    progress.attr("value", "80");
    progressMessage.text("You're nearly there...");
}    
if (numValid == 5) {
    progress.attr("value", "95");
    progressMessage.text("SO CLOSE. PRESS THE THING.");
}
  
});
</script>

Ответы [ 2 ]

2 голосов
/ 04 ноября 2019

Просто измените ваш действительный оператор if, чтобы искать проверенный атрибут также ... 

 if (this.validity.valid || $(this).is(':checked')) {
    numValid++;
 }

Вам также нужно зарегистрировать событие, когда вы щелкнете по нему ... 

$("#contactForm input, #contactForm textarea").on("keyup change",function() {
    //...code here
});
0 голосов
/ 05 ноября 2019 

progress {
width: 100%;
background: #333;
height: 20px;
border: 0;
}

::-webkit-progress-value {
  transition: width 1s;
} 
    
#progress-message {
text-align: center;
}
<head><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script></head>
<progress max="100" value="0" id="progress"></progress>
    <div class="progress-message" id="progress-message">This form, it wants you.</div>  
    <form action="#" id="contactForm" method="post">
<input type="text" name="name" id="name" title="Name" value class="input-text reqyured-entry" placeholder="Your Name:" required="required" autocomplete="off" />
<input type="email" name="email" id="email" title="Email" value class="input-text required-entry validate-email" placeholder="Email Address:" required="required" pattern="^\S+@\S+\.\S+$" autocomplete="off" />
<input type="tel" name="telephone" id="telephone" title="Telephone" value class="input-text" placeholder="Telephone No:" required="required" min="11" pattern="[-+]?[0-9]*" autocomplete="off" />  
<textarea type="text" name="comment" id="comment" title="Comment" class="required-entry input-text" placeholder="Type Your Message:" style="resize: vertical;" min="10" rows="7" required="required"></textarea>
<input type="checkbox" required="required" name="terms" id="terms"> I agree to the <a href="#"><u>Terms and Conditions</u></a><br><br>       
<input type="submit" value="SEND" title="Submit" class="button"/>
</form>
  </div>
</div>

<script>
$("#contactForm input, #contactForm textarea").on("keyup change",function() {
  
var numValid = 0;
$("#contactForm input[required],#contactForm textarea[required]").each(function() {
    if (this.validity.valid || $(this).is(':checked')) {
        numValid++;
    }
});

var progress = $("#progress"),
    progressMessage = $("#progress-message");

if (numValid == 0) {
    progress.attr("value", "0");
    progressMessage.text("This form, it wants you.");
}
if (numValid == 1) {
    progress.attr("value", "20");
    progressMessage.text("There you go, great start!");
}
if (numValid == 2) {
    progress.attr("value", "40");
    progressMessage.text("Nothing can stop you now.");
}
if (numValid == 3) {
    progress.attr("value", "60");
    progressMessage.text("You're basically a hero, right?");
}
if (numValid == 4) {
    progress.attr("value", "80");
    progressMessage.text("You're nearly there...");
}    
if (numValid == 5) {
    progress.attr("value", "95");
    progressMessage.text("SO CLOSE. PRESS THE THING.");
}
  
});
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...