I have a simple HTML form that originally was a series of Questions (A1 to A5 and B1 to B3) with yes/no radio buttons like this:
<tr>
<td width="88%" valign="top" class="field_name_left">A1</td>
<td width="12%" valign="top" class="field_data">
<input type="radio" name="CriteriaA1" value="Yes">Yes<input type="radio" name="CriteriaA1" value="No">No</td>
</tr>
The user could only answer either the A series of questions OR either the B series of questions, but not both. Also they must complete all questions in either the A or B series.
I now have an additional series of questions - C1 to C6 - and need to extend my validation scripts to ensure the user enters either A, B or C and answers all questions within each series.
My original script for just the A and B looks like this:
$(function() {
$("#editRecord").submit(function(){
// is anything checked?
if(!checkEmpty()){
$("#error").html("Please check something before submitting");
//alert("nothing Checked");
return false;
}
// Only A _OR_ B
if(isAorB()){
$("#error").html("Please complete A or B, not both");
//alert("please complete A or B, not both");
return false;
};
// all A's or all B's
if(allAorBChecked()){
$("#error").html("It appears you have not completed all questions");
//alert("missing data");
return false;
};
if(haveNo()){
// we're going on, but sending "type = C"
}
//alert("all OK");
return true;
});
});
function checkEmpty(){
var OK = false;
$(":radio").each(function(){
if (this.checked){
OK = true;
}
});
return OK;
}
function isAorB(){
var OK = false;
var Achecked = false;
var Bchecked = false;
$(":radio").each(function(){
var theChar=this.name.charAt(8);
// if we have an A checked remember it
if(theChar == "A" && this.checked && !Achecked){
Achecked = true;
}
if(Achecked && theChar == "B" && !Bchecked){
if(this.checked){
Bchecked = true;
}
}
if (Achecked && Bchecked){
OK = true;
}
});
return OK;
}
function allAorBChecked(){
var notOK = false;
var Achecked = false;
$(":radio").each(function(){
// skip through to see if we're doing A's or B's
var theChar=this.name.charAt(8);
// check the A's
if(theChar == "A" && this.checked && !Achecked){
Achecked = true;
}
});
if(Achecked){
// set the input to A
$("#type").val("A");
// check _all_ a's are checked
var thisName;
var thisChecked = false;
$(":radio").each(function(){
var theChar=this.name.charAt(8);
var checked = this.checked;
if (theChar == "A"){
if (this.name == thisName && !thisChecked){
// Yes wasn't checked - is No?
if(!checked){
notOK = true;
}
}
thisChecked = checked;
thisName = this.name;
}
});
}else{
// set the input to B
$("#type").val("B");
// check _all_ b's are checked
var thisName;
var thisChecked = false;
$(":radio").each(function(){
var theChar=this.name.charAt(8);
var checked = this.checked;
if (theChar == "B"){
if (this.name == thisName && !thisChecked){
// A wasn't checked - is B?
if(!checked){
notOK = true;
}
}
thisChecked = checked;
thisName = this.name;
}
});
}
return notOK;
}
function haveNo(){
var thisName;
var notOK = false;
$(":radio").each(function(){
var checked = this.checked;
if (this.name == thisName){
//Is this checked
if(checked){
notOK = true;
$("#type").val("C");
}
}
thisName = this.name;
});
return notOK;
}
This worked well but I'm completely stuck at extending it to include the C series. I now have to check that the user hasn't answered any A and B, A and C and B and C questions. Everything I've tried fails to validate. Here's where I'm at right now with my new script:
$(function() {
$("#editRecord").submit(function(){
// is anything checked?
if(!checkEmpty()){
$("#error").html("Please check something before submitting");
//alert("nothing Checked");
return false;
}
// Only A or B or C
if(isAorBorC()){
$("#error").html("Please complete A or B or C, not both");
//alert("please complete A or B, not both");
return false;
};
// all A's or all B's or all C's
if(allAorBorCChecked()){
$("#error").html("It appears you have not completed all questions");
//alert("missing data");
return false;
};
if(haveNo()){
// we're going on, but sending "type = C"
}
//alert("all OK");
return true;
});
});
function checkEmpty(){
var OK = false;
$(":radio").each(function(){
if (this.checked){
OK = true;
}
});
return OK;
}
function isAorBorC(){
var OK = false;
var Achecked = false;
var Bchecked = false;
var Cchecked = false;
$(":radio").each(function(){
var theChar=this.name.charAt(8);
// if we have an A checked remember it
if(theChar == "A" && this.checked && !Achecked){
Achecked = true;
}
if(theChar == "B" && this.checked && !Achecked){
Bchecked = true;
}
if(theChar == "C" && this.checked && !Achecked){
Cchecked = true;
}
if(Achecked && theChar == "B" && !Bchecked){
if(this.checked){
Bchecked = true;
}
}
if(Achecked && theChar == "C" && !Cchecked){
if(this.checked){
Cchecked = true;
}
}
if(Bchecked && theChar == "C" && !Cchecked){
if(this.checked){
Cchecked = true;
}
}
if (Achecked && Bchecked){
OK = true;
}
if (Achecked && CBchecked){
OK = true;
}
if (Bchecked && Cchecked){
OK = true;
}
});
return OK;
}
function allAorBorCChecked(){
var notOK = false;
var Achecked = false;
$(":radio").each(function(){
// skip through to see if we're doing A's or B's
var theChar=this.name.charAt(8);
// check the A's
if(theChar == "A" && this.checked && !Achecked){
Achecked = true;
}
});
if(Achecked){
// set the input to A
$("#type").val("A");
// check _all_ a's are checked
var thisName;
var thisChecked = false;
$(":radio").each(function(){
var theChar=this.name.charAt(8);
var checked = this.checked;
if (theChar == "A"){
if (this.name == thisName && !thisChecked){
// Yes wasn't checked - is No?
if(!checked){
notOK = true;
}
}
thisChecked = checked;
thisName = this.name;
}
});
}elseif{
// set the input to B
$("#type").val("B");
// check _all_ b's are checked
var thisName;
var thisChecked = false;
$(":radio").each(function(){
var theChar=this.name.charAt(8);
var checked = this.checked;
if (theChar == "B"){
if (this.name == thisName && !thisChecked){
// A wasn't checked - is B?
if(!checked){
notOK = true;
}
}
thisChecked = checked;
thisName = this.name;
}
});
}
return notOK;
}
}else{
// set the input to C
$("#type").val("C");
// check _all_ c's are checked
var thisName;
var thisChecked = false;
$(":radio").each(function(){
var theChar=this.name.charAt(8);
var checked = this.checked;
if (theChar == "C"){
if (this.name == thisName && !thisChecked){
// A wasn't checked - is B?
if(!checked){
notOK = true;
}
}
thisChecked = checked;
thisName = this.name;
}
});
}
return notOK;
}
function haveNo(){
var thisName;
var notOK = false;
$(":radio").each(function(){
var checked = this.checked;
if (this.name == thisName){
//Is this checked
if(checked){
notOK = true;
$("#type").val("C");
}
}
thisName = this.name;
});
return notOK;
}
Anyone see what I'm doing wrong?
First of all, I think that the best usability would be to make the form easier to use, by making it harder to get wrong. If you are using javascript & jQuery, you may as well set it up so that the user has to pick a section before being able to select any items in it. You can easily support the requirement of showing all the questions, but it is a disservice to the users to allow them to perform needless work (such as filling out more than one section mistakenly) when the computer could very easily prevent this.
If you would like to see what that might look like, please comment and I will work something up for you.
In the meantime, going with your current design, here is a fiddle demonstrating one possible technique. It will work with any number of sections.
Please see that code for a full listing, but here is the script that does the heavy lifting of validation.
function validate(ev) {
var sectionsTouched = $('ol').has(':checked'),
inputs = {},
errorMessage = '';
if (sectionsTouched.length === 0) {
errorMessage = 'Please check something before submitting.';
} else if (sectionsTouched.length > 1) {
errorMessage = 'Please complete only one of sections ' + namesCommaDelimited(seriesNames(), 'or') + '.';
} else {
sectionsTouched.find('input').each(function(i, e) {
var me = $(e), name = me.attr('name');
inputs[name] = !!inputs[name] || me.is(':checked');
});
$.each(inputs, function(k, v) {
if (!v) {
errorMessage = 'Please complete all questions in your selected section.';
}
return v;
});
}
if (errorMessage !== '') {
$('#error').html(errorMessage);
ev.preventDefault();
return false;
}
return true;
}
Basic logic: if no section has a checked item, display the appropriate message. If more than one section has a checked item, too many sections have answers. If exactly one section has answers, loop through the inputs and collect a list of those that have checks for the corresponding control name. If any name exists that did not have a check, then some control group was left unchecked, and the appropriate message is displayed.
I had to take some liberties to construct a form that suits the requirements well enough for a proper demonstration. Here is what it looks like:
I hope this helps!
P.S. For the sake of completeness I would like to mention a couple of style considerations:
When you find yourself repeating code, try to abstract the repetition away--create a function, or declare a variable. For example, instead of doing $('#error').html() multiple times, set a value then do the html-setting only once.
Try to write code that doesn't secretly depend on document structure such as form field names being in a particular format (having a particular character at a position). Your javascript depends heavily on the charAt(8) function returning 'A' or 'B', and this makes it fragile--what if someone else (or even your future self) were to accidentally break the control names? Suddenly the javascript would break and the link between the two is not obvious. You can code it so you don't even need to know which section is which, as long as you have some selector that can indicate each individual section. Using a class name is okay because the class name in javascript obviously has to match the one in the html.
To greatly simplify your task, I'd suggest creating a single function that answers, for a given group: a) whether anything is checked or not; b) whether everything is checked or not. Something like:
function isAnyAllChecked(group) {
var any = false;
var all = true;
$(":radio").each(function(){
var theChar=this.name.charAt(8);
if(theChar == group && this.checked){
any = true;
}
if(theChar == group && !this.checked){
all = false;
}
});
return { any:any, all:all };
}
Now your other functions can be trivially rewritten as:
function isAorBorC() {
return (isAnyAllChecked("A").any ? 1 : 0) +
(isAnyAllChecked("B").any ? 1 : 0) +
(isAnyAllChecked("C").any ? 1 : 0) !== 1;
}
function allAorBorCChecked() {
var group = isAnyAllChecked("A").any ? "A" :
isAnyAllChecked("B").any ? "B" :
isAnyAllChecked("C").any ? "C" :
undefined;
if ( group ) {
$("#type").val(group);
return !isAnyAllChecked(group).all;
}
else
return true;
}
Notes:
You can reuse the return values of isAnyAllChecked for efficiency; I didn't do it in the code above to keep the method interfaces unchanged.
You could typecast your boolean to int (implicitly or explicitly) instead of doing any ? 1 : 0, but IMHO that way is clearer.
You also could generalize your solution to an arbitrary number of groups, using arrays and functions like map, filter etc, but for the small number of groups you have that's not really needed.
First of all i think the best approach will be to have 1 form for each section with it's own submit. You only validate if that form got all answered and that's it, the rest is discared.
<form id="formA">
<input ...
<button type="submit">Submit with A Answers</button>
</form>
<form id="formB">
<input ...
<button type="submit">Submit with B Answers</button>
</form>
etc..
BUT just in case there's a reason for why you are doing that way, here's a fiddle of how it can make it work no matter how many sections, a, b, c, d, e, f etc you have..
http://jsfiddle.net/cUfY4/
One more thing: there are several ways to resolve this problem.
The proposed Javascript is :
$('form').submit(function( e ){
e.preventDefault();
var globalAnswers = 0;
var globalComplete = false;
$('.section').each(function() {
var $this = $(this), sectionHasAnswers = false, sectionComplete = true;
$this.find('input[type="radio"]').each(function() {
var inputName = $(this).attr('name');
if ($('input[name="' + inputName + '"]').is(':checked')) {
sectionHasAnswers = true;
} else {
sectionComplete = false;
}
});
if (sectionComplete && !globalComplete) {
globalAnswers++
globalComplete = true;
} else {
if (sectionHasAnswers) {globalAnswers++};
}
});
if (globalAnswers == 1 && globalComplete) {
// EVERYTHING OK! SUBMIT FORM!
} else {
// ERRORS use globalAnswers and globalComplete for exact problem
}
});
Related
I'm new to JavaScript and I'm doing this color guessing game as an assignment. My script is below. I've tried many different ways that I can think of and I just couldn't make it work.
In summary I have two problems.
How can I check if a value that is typed in by a user exists in the array?
If a user clicks Ok with no value, how can I make sure to exclude null values?enter code here
Script is Below. If you run the program it will show the answer that is to be guessed by the user (only for testing).If the user guess is correct then the page color will be that color. Any help will be much appreciated.
<DOCTYPE! HTML>
<HTML>
<HEAD>
<TITLE>Color Guessing Game</TITLE>
</HEAD>
<body onload="do_game()">
<script type="text/javascript">
var target;
var target_index;
var guess_input;
var finished = false;
var guess_input_text;
var guesses = 0
var color= ["Blue","Coral","Cyan","Fuchsia","Gold","Lavender","Lime","Red","Tan"];
var myBody=document.getElementsByTagName("body")[0];
var check_color = colors.indexOf(guess_input);
function do_game(){
var random_number_integer = colors[Math.floor(Math.random() * colors.length-1)];
target = random_number_integer;
alert(target);
while (!finished) {
guess_input_text = prompt("I am thinking of one these colors: \n\n\n" +
colors.toString() +
"\n\n\n What color am I thinkning of?");
guess_input = guess_input_text;
guesses += 1;
finsihed = check_guess();
}
}
function check_guess() {
if (guess_input == null){
alert("Type in a color.");
return false;
}
if (guess_input > target){
alert("Your input is alphabetically lower than mine!" +
"\n\nPlease Try Again.\n\n");
return false;
}
if (guess_input < target){
alert("Your input is alphabetically higher than mine!" +
"\n\nPlease Try Again.\n\n");
return false;
}
alert("Yes!!!, the correct color was: " + target +
"\n\n\n The Number of guesses:" + guesses +
"\n\n\nGood Job\n\n\n");
myBody.style.background=guess_input;
return true;
}
</script>
</body>
</HTML>
Answer 1 : Use indexOf : (Docs)
Answer 2: https://stackoverflow.com/a/20533178/3603806
// check whether the array or string empty
function is_empty(obj){
if (obj == null || (obj == '' && obj.length == 0)){
return true;
}
else {
return false;
}
}
// check whether this elem is included in arr
function is_included(elem, arr){
if (is_empty(arr) || is_empty(elem) || arr.toString().indexOf(elem) == -1){
return false;
}
else {
return true;
}
}
I have 2 address entries on my form. I also have 2 radio buttons to designate the "preferred" mailing address.
I'm attempting to validate these 2 and am not really sure if I'm doing it correctly. It seems to work if I have both addresses filled but I can't seem to get it to validate correctly if one of the addresses isn't filled.
Here's the javascript that does the validation:
function checkMailingPrefs() {
var prefs = ["MailPrefHome", "MailPrefBusi"];
var field = ["HomeAddress1", "BusinessAddress1"];
for (i = 0; i < 2; i++) {
if ($("#"+prefs[i]).is(":checked") && $("#"+field[i]).val() == "") {
$("#" + prefs[i]).prop('checked', false);
$("#MailPrefBusi").validationEngine('showPrompt', 'You must select the correct Mailing Preference', 'error', true);
return false;
}
if ($("#"+field[i]).val() == "" || !$("#"+prefs[i]).is(":checked")) {
$("#MailPrefBusi").validationEngine({promptPosition : "bottomRight", scroll: true}).validationEngine('showPrompt', 'You must select the correct Mailing Preference', 'error', true);
return false;
}
}
return true;
}
I'm using jQueryValidationEngine but it also doesn't correctly validate them. I only use it to show the validation error for these fields.
Here is the criteria:
If the MailPrefBusi is checked, then the BusinessAddress1 must be filled in.
If the MailPrefHome is checked, then the HomeAddress1 must be filled in.
If no MailPrefxxx is checked, show error. If no xxxAddress1 is filled, Show error.
It looks like your second if statement if ($("#"+field[i]).val() == "" || !$("#"+prefs[i]).is(":checked")) { is returning false when you don't want it to. You should be able to accomplish what you want using this:
function checkMailingPrefs() {
var prefs = ["MailPrefHome", "MailPrefBusi"];
var field = ["HomeAddress1", "BusinessAddress1"];
for (i = 0; i < 2; i++) {
if ($("#"+prefs[i]).is(":checked") && $("#"+field[i]).val() == "") {
// enhanced validation function call here
return false;
}
}
//if the user hasnt checked anything, you can remove this if the form should validate without the user having to set a radio button
if(!$("#MailPrefBusi, #MailPrefHome").is(":checked")) {
// enhanced validation function call here
return false
}
return true;
}
You can see it working at this JS Fiddle: https://jsfiddle.net/h0vj9r35/
Hope that helps!
If you are trying to figure out whether the corresponding fields are filled based on checkbox values in a scenario where you have n no. of checkboxes and fields and would like to avoid hardcoding of values, you may use the following:
var prefs = ["MailPrefHome", "MailPrefBusi"];
var field = ["HomeAddress1", "BusinessAddress1"];
var allEmpty = false;
var valueError = ""
for (i = 0; i < 2; i++)
{
if ($("#"+field[i]).val() == "" || !$("#"+prefs[i]).is(":checked")) {
if(!$("#"+prefs[i]).is(":checked"))
valueError += prefs[i] + "," ;
else if($("#"+field[i]).val() == "")
valueError += field[i];
allEmpty = true;
}
if ($("#"+prefs[i]).is(":checked") && $("#"+field[i]).val() == "")
{
$("#" + prefs[i]).prop('checked', false);
allEmpty = false;
alert("Need to enter " + field[i]);
return false;
}
if((i == 1) && allEmpty)
{
alert("You need to select " + valueError);
return false;
}
}
return true;
http://jsfiddle.net/n0303qd6/1/
The confirmation popup always return true. Please advice the correction needed.
$('#btnDelete').click(function () {
var check = false;
var aCheckbox = document.getElementsByTagName('input');
for (var i = 0; i < aCheckbox.length; i++) {
if (aCheckbox[i].type === 'checkbox' && aCheckbox[i].checked) {
check = true;
}
}
if (check === true) {
return jConfirm('Do u really want to delete?', 'Confirmation');
} else {
jAlert("Please select serial number", 'Alert');
return false;
}
});
Hope this help :
if (check === true) {
var answer = confirm('Do u really want to delete?', 'Confirmation');
if(answer)
return true;
else
return false;
}
else {
jAlert("Please select serial number", 'Alert');
return false;
}
Yes it creates problem you need to use third parameter as callback function of jconfirm like,
if (check === true) {
jConfirm('Do u really want to delete?', 'Confirmation', function(r) {
jAlert('Confirmed: ' + r, 'Confirmation Results');
});
return false;
} else {
.....
Also remove extra closing }); from your code, see last two lines.
I have the following form:
<form name="survey1" action="add5up.php" method="post" onsubmit="return validateForm()">
<div id="question">Q1) My programme meets my expectations</div><br />
Always<INPUT TYPE = 'Radio' Name ='q1' value= 'a'>
Usually<INPUT TYPE = 'Radio' Name ='q1' value= 'b'>
Rarely<INPUT TYPE = 'Radio' Name ='q1' value= 'c'>
Never<INPUT TYPE = 'Radio' Name ='q1' value= 'd'>
<input type="submit" value="addData" />
</form>
I am trying to validate whether a Radio button has been selected.
The code I am using:
<script type="text/javascript">
function validateForm()
{
if( document.forms["survey1"]["q1"].checked)
{
return true;
}
else
{
alert('Please answer all questions');
return false;
}
}
</script>
This is not working. Any ideas?
When using radiobuttons you have to go through to check if any of them is checked, because javascript threats them as an array:
<script type="text/javascript">
function validateRadio (radios)
{
for (i = 0; i < radios.length; ++ i)
{
if (radios [i].checked) return true;
}
return false;
}
function validateForm()
{
if(validateRadio (document.forms["survey1"]["q1"]))
{
return true;
}
else
{
alert('Please answer all questions');
return false;
}
}
</script>
Regards
My solution for validation complex forms include radios.
Usage is simple, function return TRUE/FALSE after validation.
var rs_target is ID of form
scTo is my custom func to scroll to ID, you can use own function to show/scroll errors
scTo("#"+err_target);
Error box will be like
<div class="rq_message_box rq_message_box_firstname display-none">err message</div>
Validation
var validation = validateForm(rs_target);
if(validation == false){
return false;
}
Function
function validateForm(rs_target) {
var radio_arr = [];
var my_form = $("#"+rs_target);
my_form = my_form[0];
$(".rq_message_box").hide(); //clear all errors
//console.log(my_form);
var err = false;
var err_target = "";
for (key in my_form) {
//console.log("do");
if(!my_form[key]||my_form[key]==null||err){
break;
}
//console.log(my_form[key].name);
var x = my_form[key].value;
//console.log(x);
if(my_form[key].type == "radio"){
//console.log("radio");
if(radio_arr[my_form[key].name] != true){
radio_arr[my_form[key].name] = null;
}
if(my_form[key].checked){
radio_arr[my_form[key].name] = true;
}
}else{
if (x == null || x == "") {
//console.log(form[key].name.toString() + " must be filled out");
err = true;
err_target = my_form[key].name;
//return false;
}
}
}
//console.log(radio_arr);
var rad_err = false;
for (key in radio_arr) {
if(rad_err){
break;
}
var x = radio_arr[key];
if (x == null || x == "") {
//console.log("RADIO> "+key + " must be filled out");
rad_err = true;
err_target = key;
}
}
if(err || rad_err){
// some error stuff, for me show prepared error/help box with class [".rq_message_box_"+err_target] / err_target is name of input like [.rq_message_box_firsname]
$(".rq_message_box_"+err_target).show(); //show error message for input
scTo("#"+err_target); //scroll to - custom func
return false;
}else{
return true;
}
}
I'm not sure if I'm misunderstanding how True/False works in Javascript or not.
In my Jquery script below I'm declaring 6 variables as false.
If the regex validation conditions are good, then I redeclare the variable(s) to true.
On the bottom is a simple alert() to tell me when all variables are true.
The validation conditions are working (removing/adding classes), but the alert does not show up. That's why I'm not sure if I'm messing up the true/false part or not.
$('#password1').keyup(function() {
var checkLength = false;
var checkLetter = false;
var checkCaps = false;
var checkNum = false;
var checkSymbol = false;
var checkSpace = false;
var pswd = $(this).val();
//validate the length
if(pswd.length < 6 ){
$('#length').removeClass('valid').addClass('invalid');
}else{
$('#length').removeClass('invalid').addClass('valid');
checkLength = true;
}
//validate letter
if(pswd.match(/[A-Za-z]/)){
$('#letter').removeClass('invalid').addClass('valid');
}else{
$('#letter').removeClass('valid').addClass('invalid');
checkLetter = true;
}
//validate capital letter
if(pswd.match(/[A-Z]/)){
$('#capital').removeClass('invalid').addClass('valid');
}else{
$('#capital').removeClass('valid').addClass('invalid');
checkCaps = true;
}
//validate number
if(pswd.match(/\d/)){
$('#number').removeClass('invalid').addClass('valid');
}else{
$('#number').removeClass('valid').addClass('invalid');
checkNum = true;
}
//validate symbols
if(pswd.match(/[^a-zA-Z0-9]/)){
$('#symbol').removeClass('invalid').addClass('valid');
}else{
$('#symbol').removeClass('valid').addClass('invalid');
checkSymbol = true;
}
//validate no spaces
if(pswd.match(/\s/)){
$('#spaces').removeClass('valid').addClass('invalid');
}else{
$('#spaces').removeClass('invalid').addClass('valid');
checkSpace = true;
}
// here is where I'm concerned I'm wrong
if(checkLength == true && checkLetter == true && checkCaps == true && checkNum == true && checkSymbol == true && checkSpace == true){
alert("All good");
}
});
Would someone double check me?
At first, there is no need to write checkLength == true, checkLength is enough since they are all boolean variables.
Second, in some of your conditions you assign class invalid but set the var to true, while in others you do it vice versa. Every check... = true should be in the same branch with class = valid.
Also, personally, I would adapt the validity conditions, to have all positive events either in the if or in the else branch, but not mixed like you do at the moment.
Lastly, I always try to avoid duplicate code. There are a lot of places you could refactor, but you could start easy with setting the classes in a separate function.
See it working in this fiddle.
$('#password1').keyup(function() {
var checkLength = false;
var checkLetter = false;
var checkCaps = false;
var checkNum = false;
var checkSymbol = false;
var checkSpace = false;
var pswd = $(this).val();
//validate the length
// reverse the condition, to have the valid state in the if branch as well
if(pswd.length >= 6 ){
setValid('#length');
checkLength = true;
}else{
setInvalid('#length');
}
//validate letter
if(pswd.match(/[A-Za-z]/)){
setValid('#letter');
checkLetter = true;
}else{
setInvalid('#letter');
}
//validate capital letter
if(pswd.match(/[A-Z]/)){
setValid('#capital');
checkCaps = true;
}else{
setInvalid('#capital');
}
//validate number
if(pswd.match(/\d/)){
setValid('#number');
checkNum = true;
}else{
setInvalid('#number');
}
//validate symbols
if(pswd.match(/[^a-zA-Z0-9]/)){
setValid('#symbol');
checkSymbol = true;
}else{
setInvalid('#symbol');
}
//validate no spaces
if(!pswd.match(/\s/)){
setValid('#spaces');
checkSpace = true;
}else{
setInvalid('#spaces');
}
function setValid(e){$(e).removeClass('invalid').addClass('valid')}
function setInvalid(e){$(e).removeClass('valid').addClass('invalid')}
if(checkLength && checkLetter && checkCaps && checkNum && checkSymbol && checkSpace){
alert("All good");
}
console.log("keyup");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="password1" type="text">
All of these have check* = true in the wrong place:
//validate letter
if(pswd.match(/[A-Za-z]/)){
$('#letter').removeClass('invalid').addClass('valid');
}else{
$('#letter').removeClass('valid').addClass('invalid');
checkLetter = true;
}
//validate capital letter
if(pswd.match(/[A-Z]/)){
$('#capital').removeClass('invalid').addClass('valid');
}else{
$('#capital').removeClass('valid').addClass('invalid');
checkCaps = true;
}
//validate number
if(pswd.match(/\d/)){
$('#number').removeClass('invalid').addClass('valid');
}else{
$('#number').removeClass('valid').addClass('invalid');
checkNum = true;
}
//validate symbols
if(pswd.match(/[^a-zA-Z0-9]/)){
$('#symbol').removeClass('invalid').addClass('valid');
}else{
$('#symbol').removeClass('valid').addClass('invalid');
checkSymbol = true;
}
Insert the statements in the block following the if (where they are deemed valid) as opposed to in the else (where they are deemed invalid):
//validate letter
if(pswd.match(/[A-Za-z]/)){
$('#letter').removeClass('invalid').addClass('valid');
checkLetter = true;
}else{
$('#letter').removeClass('valid').addClass('invalid');
}
//validate capital letter
if(pswd.match(/[A-Z]/)){
$('#capital').removeClass('invalid').addClass('valid');
checkCaps = true;
}else{
$('#capital').removeClass('valid').addClass('invalid');
}
//validate number
if(pswd.match(/\d/)){
$('#number').removeClass('invalid').addClass('valid');
}else{
$('#number').removeClass('valid').addClass('invalid');
checkNum = true;
}
//validate symbols
if(pswd.match(/[^a-zA-Z0-9]/)){
$('#symbol').removeClass('invalid').addClass('valid');
checkSymbol = true;
}else{
$('#symbol').removeClass('valid').addClass('invalid');
}
And, although there are better ways of writing validation, this is a similar, yet more concise version of your snippet:
$("#password1").keyup(function() {
var pswd = $(this).val();
var checkLength = pswd.length >= 6;
var checkLetter = /[A-Za-z]/.test(pswd);
var checkCaps = /[A-Z]/.test(pswd);
var checkNum = /\d/.test(pswd);
var checkSymbol = /[^A-Za-z0-9]/.test(pswd);
var checkSpace = !/\s/.test(pswd);
$("#length") .removeClass("valid invalid").addClass(checkLength ? "valid" : "invalid");
$("#letter") .removeClass("valid invalid").addClass(checkLetter ? "valid" : "invalid");
$("#capital").removeClass("valid invalid").addClass(checkCaps ? "valid" : "invalid");
$("#number") .removeClass("valid invalid").addClass(checkNum ? "valid" : "invalid");
$("#symbol") .removeClass("valid invalid").addClass(checkSymbol ? "valid" : "invalid");
$("#spaces") .removeClass("valid invalid").addClass(checkSpace ? "valid" : "invalid");
if(checkLength && checkLetter && checkCaps && checkNum && checkSymbol && checkSpace) {
alert("All good");
}
});
To me, it seems that your assignments are valid statements. Whether or not they are getting set the way you want is a different matter.
It is most likely that one of the flags is not being set the way you want it to be set. To check this, you could alert each of your flags (checkCaps, etc) to confirm that each value is set the way you want. If all of the true/false is correct, then the issue would be in your final if statement.
As many people have suggested, removing the == true is a good idea. Since Javascript is dynamically typed, there is a slight possibility that it is not treating your flags as a boolean, but as something else.
If removing the == true does not work, you could check different pairs of flags to see which one makes the entire statement false.