Submit HTML form when confirm checkbox is checked
Question
I 've created an HTML form with validations, when I directly click the sign-up button, without entering any data it alerts the user to accept the privacy policy and validation messages are displayed. Now when I fill the form and click the checkbox and then click the sign-up button it still alerts me to accept the privacy policy. Here is my code
$(function() { $('#first-name-warning-message').hide(); $('#last-name-warning-message').hide(); var first_name_error = false; var last_name_error = false; $('#first-name').focusout(function() { validate_first_name(); }); $('#last-name').focusout(function() { validate_last_name(); }); function validate_first_name() { var first_name = $('#first-name').val(); var first_name_regex = /^[a-zA-Z ]{3,15}$/; if (first_name.length == '') { $('#first-name-warning-message').html("Please Enter Your First Name !"); $('#first-name-warning-message').show(); first_name_error = true; } else if (first_name.length < 3) { $('#first-name-warning-message').html("First Name Not Valid !"); $('#first-name-warning-message').show(); first_name_error = true; } else if (!first_name_regex.test(first_name)) { $('#first-name-warning-message').html("First Name Must Not Contain Any Digits Or Symbols !"); $('#first-name-warning-message').show(); first_name_error = true; } else { $('#first-name-warning-message').hide(); } } function validate_last_name() { var last_name = $('#last-name').val(); var last_name_regex = /^[a-zA-Z ]{3,15}$/; if (last_name.length == '') { $('#last-name-warning-message').html("Please Enter Your Last Name !"); $('#last-name-warning-message').show(); last_name_error = true; } else if (last_name.length < 3) { $('#last-name-warning-message').html("Last Name Not Valid !"); $('#last-name-warning-message').show(); last_name_error = true; } else if (!last_name_regex.test(last_name)) { $('#last-name-warning-message').html("Last Name Must Not Contain Any Digits Or Symbols !"); $('#last-name-warning-message').show(); last_name_error = true; } else { $('#last-name-warning-message').hide(); } } $('#sign-up-form').submit(function(e) { first_name_error = false; last_name_error = false; age_error = false; validate_first_name(); validate_last_name(); check_confirmation(); function check_confirmation() { if (!$('privacy-policy').is(":checked")) { window.alert("Please Accept Our Privacy Policy !"); e.preventDefault(); } else { window.alert("Thank You For Accepting Our Privacy Policy !"); } } if ((first_name_error == false) && (last_name_error == false)) { return true; } else { return false; } }); });
#first-name { width: 300px; margin-top: 10px; margin-left: 200px; padding-left: 10px; border: 1px solid grey; border-radius: 5px; } #last-name { width: 300px; margin-top: 5px; margin-left: 200px; padding-left: 10px; border: 1px solid grey; border-radius: 5px; } #first-name-warning-message { padding-left: 350px; font-size: 18px; font-weight: bold; } #last-name-warning-message { padding-left: 350px; font-size: 18px; font-weight: bold; } #privacy-policy { margin-left: 10px; } #sign-up-button { width: 200px; margin-top: 10px; margin-left: 240px; font-size: 18px; border-radius: 50px; }
<!DOCTYPE html> <html id="html"> <head id="html"> <title> E-Chatz_Online.com - Sign Up </title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body id="body"> <form id="sign-up-form" method="post"> <div id="row-one"> <input type="text" id="first-name" name="first_name" placeholder="First Name" maxlength="15" autocomplete="off"> </div> <div id="span-container"> <span id="first-name-warning-message" class="text-danger"> </span> </div> <div id="row-two"> <input type="text" id="last-name" name="last_name" placeholder="Last Name" maxlength="15" autocomplete="off"> </div> <div id="span-container"> <span id="last-name-warning-message" class="text-danger"> </span> </div> <div id="row-three"> <input type="checkbox" id="privacy-policy"> By clicking the <b> Sign Up </b> button, you acknowledge that you have read and agree our <a href="#"> Privacy Policy </a> . </input> </div> <div id="row-four"> <button id="sign-up-button" name="sign_up_button" class="btn btn-primary" type="submit"> Sign Up </button> </div> </form> </body> </html>
How to solve this problem.
2 answers
solution1
1 2018-08-17 09:19:24
Use # infront of the variable. Use privacy-policy in function check_confirmation()
solution2
0 2018-08-17 09:16:18
It was a simple mistake. Your selector was not correct. You need to change
$('privacy-policy').is(":checked")
to
$('#privacy-policy').is(":checked")
as privacy-policy is an id that you want to refer to.
<!DOCTYPE html> <html id="html"> <head id="html"> <title> E-Chatz_Online.com - Sign Up </title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <style> #first-name { width: 300px; margin-top: 10px; margin-left: 200px; padding-left: 10px; border: 1px solid grey; border-radius: 5px; } #last-name { width: 300px; margin-top: 5px; margin-left: 200px; padding-left: 10px; border: 1px solid grey; border-radius: 5px; } #first-name-warning-message { padding-left: 350px; font-size: 18px; font-weight: bold; } #last-name-warning-message { padding-left: 350px; font-size: 18px; font-weight: bold; } #privacy-policy { margin-left: 10px; } #sign-up-button { width: 200px; margin-top: 10px; margin-left: 240px; font-size: 18px; border-radius: 50px; } </style> </head> <body id="body"> <form id="sign-up-form" method="post"> <div id="row-one"> <input type="text" id="first-name" name="first_name" placeholder="First Name" maxlength="15" autocomplete="off"> </div> <div id="span-container"> <span id="first-name-warning-message" class="text-danger"> </span> </div> <div id="row-two"> <input type="text" id="last-name" name="last_name" placeholder="Last Name" maxlength="15" autocomplete="off"> </div> <div id="span-container"> <span id="last-name-warning-message" class="text-danger"> </span> </div> <div id="row-three"> <input type="checkbox" id="privacy-policy"> By clicking the <b> Sign Up </b> button, you acknowledge that you have read and agree our <a href="#"> Privacy Policy </a> . </input> </div> <div id="row-four"> <button id="sign-up-button" name="sign_up_button" class="btn btn-primary" type="submit"> Sign Up </button> </div> </form> <script> $(function() { $('#first-name-warning-message').hide(); $('#last-name-warning-message').hide(); var first_name_error = false; var last_name_error = false; $('#first-name').focusout(function() { validate_first_name(); }); $('#last-name').focusout(function() { validate_last_name(); }); function validate_first_name() { var first_name = $('#first-name').val(); var first_name_regex = /^[a-zA-Z ]{3,15}$/; if (first_name.length == '') { $('#first-name-warning-message').html("Please Enter Your First Name !"); $('#first-name-warning-message').show(); first_name_error = true; } else if (first_name.length < 3) { $('#first-name-warning-message').html("First Name Not Valid !"); $('#first-name-warning-message').show(); first_name_error = true; } else if (!first_name_regex.test(first_name)) { $('#first-name-warning-message').html("First Name Must Not Contain Any Digits Or Symbols !"); $('#first-name-warning-message').show(); first_name_error = true; } else { $('#first-name-warning-message').hide(); } } function validate_last_name() { var last_name = $('#last-name').val(); var last_name_regex = /^[a-zA-Z ]{3,15}$/; if (last_name.length == '') { $('#last-name-warning-message').html("Please Enter Your Last Name !"); $('#last-name-warning-message').show(); last_name_error = true; } else if (last_name.length < 3) { $('#last-name-warning-message').html("Last Name Not Valid !"); $('#last-name-warning-message').show(); last_name_error = true; } else if (!last_name_regex.test(last_name)) { $('#last-name-warning-message').html("Last Name Must Not Contain Any Digits Or Symbols !"); $('#last-name-warning-message').show(); last_name_error = true; } else { $('#last-name-warning-message').hide(); } } $('#sign-up-form').submit(function(e) { first_name_error = false; last_name_error = false; age_error = false; validate_first_name(); validate_last_name(); check_confirmation(); function check_confirmation() { if (!$('#privacy-policy').is(":checked")) { window.alert("Please Accept Our Privacy Policy !"); e.preventDefault(); } else { window.alert("Thank You For Accepting Our Privacy Policy !"); } } if ((first_name_error == false) && (last_name_error == false)) { return true; } else { return false; } }); }); </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Submit when checkbox is checked
submit form check if checkbox is checked
Submit form only if a checkbox is checked
Enable/disable submit button when any/no checkbox in form is checked
Submit form when a checkbox is checked and getting data with POST
HTML Form Parse Checked Checkbox
How to submit 0 if checkbox is unchecked and submit 1 if checkbox is checked in HTML
Submit form only if at least one checkbox is checked
Block form submit if no one checkbox checked
Press enter to submit form if checkbox is checked
Related Tags