Javascript Error or bug?

Please look at this
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">

    <title>Backflow Assembly & Tester Information - Registration</title>
    <style>
        .nopadding {
            padding: 0 !important;
            margin: 0 !important;
        }
        
        .wrapper {
            max-width: 767px;
            min-width: 480px;
            margin: 0 auto;
        }
    </style>
	<script>
	tstr = new Array();
	lic = new Array();
	nu = 4;
			tstr[0] = "Dan Todd";
		lic[0] = "#005, BPAT11021";
			tstr[1] = "Richard Korts";
		lic[1] = "#005, BPAT12345";
			tstr[2] = "Nolan Butterfras";
		lic[2] = "";
			tstr[3] = "Richard Korts";
		lic[3] = "ABCD-1234";
		
	tp = "";
	function chk_vals() {
		if (document.st.firm.value == "" || document.st.faddr.value == "" || document.st.fcity.value == "" || document.st.fzip.value == "" || document.st.fphone.value == "" || document.st.tname.value == "" || document.st.ctno.value == "" || document.st.tgmm.value == "" || document.st.tgsn.value == "" || document.st.tgcdate.value == "" || document.st.pwd.value == "" || document.st.email.value == "" || document.st.pname.value == "") {
			alert("All form values required.");
			return false;
		}
		dok = true;
		for (i = 0; i < nu; i++) {
			if (trim(document.st.tname.value) == trim(tstr[i])) {
				dok = false;
				break;
			}
			if (trim(document.st.ctno.value) == trim(lic[i])) {
				dok = false;
				break;
			}
		}
		if (! dok) {
			alert("Tester name & License number must be unique.");
			return false;
		}	
		if (tp == "u") {
			if (document.st.pwdr.value == "") {
				return true;
			}
		}		
		if (document.st.pwd.value != document.st.pwdr.value) {
			alert("Passwords do not match.");
			return false;
		}

		return true;
	}
	</script>
	<script>
  $(function() {
    $( "#datepickergc" ).datepicker();
  });
</script>
</head>	
<body>
<div class="wrapper">
<form method="POST" name="st" action="proc_register.php?tp=" onSubmit="return chk_vals();">
<div class="container-fluid" style="background-color: #F3D9AF;">
<div class="row" style="background-color: #F3D9AF;">
    <div class="col-xs-8 text-center col-xs-offset-2"><img src="images/bfp_logo_sm.jpg"></div>
</div>
<div class="row" style="background-color: #F3D9AF;">
       <div class="col-xs-8 text-center col-xs-offset-2" style="font-size:18px;"><b>Backflow Assembly & Test Report Form - Register</b></div>
 </div>
 	
<div class="row">
		<div class="col-xs-4 text-right " style="padding-top:10px;">Your Name:</div>
		<div class="col-xs-4 col-xs-offset-2" style="padding-top:10px;">&nbsp;<input type="text" name="pname" ></div>
	</div>	
	<div class="row">
		<div class="col-xs-4 text-right" style="padding-top:10px;">email Address:</div>
		<div class="col-xs-4 col-xs-offset-2" style="padding-top:10px;">&nbsp;<input type="text" name="email" ></div>
	</div>
	<div class="row">
		<div class="col-xs-8 col-xs-offset-2">Password must be 8 or more, contain at least one number.</div>
	</div>	
	<div class="row">
		<div class="col-xs-4 text-right " style="padding-top:10px;">Password:</div>
		<div class="col-xs-4 col-xs-offset-2" style="padding-top:10px;">&nbsp;<input type="password" name="pwd" ></div>
	</div>
		<div class="row">
		<div class="col-xs-4 text-right" style="padding-top:10px;">Repeat Password:</div>
		<div class="col-xs-4 col-xs-offset-2" style="padding-top:10px;">&nbsp;<input type="password" name="pwdr"></div>
	</div>
	<div class="row">
		<div class="col-xs-4 text-right" style="padding-top:10px;">Firm Name:</div>
		<div class="col-xs-4 col-xs-offset-2" style="padding-top:10px;">&nbsp;<input type="text" name="firm" ></div>
	</div>	
	<div class="row">
		<div class="col-xs-4 text-right" style="padding-top:10px;">Firm Address:</div>
		<div class="col-xs-4 col-xs-offset-2" style="padding-top:10px;">&nbsp;<input type="text" name="faddr" ></div>
	</div>
	<div class="row">
		<div class="col-xs-4 text-right" style="padding-top:10px;">Firm City:</div>
		<div class="col-xs-4 col-xs-offset-2" style="padding-top:10px;">&nbsp;<input type="text" name="fcity" ></div>
	</div>
	<div class="row">
		<div class="col-xs-4 text-right" style="padding-top:10px;">Firm Zip:</div>
		<div class="col-xs-4 col-xs-offset-2" style="padding-top:10px;">&nbsp;<input type="text" name="fzip" ></div>
	</div>
	<div class="row">
		<div class="col-xs-4 text-right" style="padding-top:10px;">Firm Phone:</div>
		<div class="col-xs-4 col-xs-offset-2" style="padding-top:10px;">&nbsp;<input type="text" name="fphone" ></div>
	</div>
	<div class="row">
		<div class="col-xs-4 text-right" style="padding-top:10px;">Tester Name:</div>
		<div class="col-xs-4 col-xs-offset-2" style="padding-top:10px;">&nbsp;<input type="text" name="tname" ></div>
	</div>
	<div class="row">
		<div class="col-xs-4 text-right" style="padding-top:10px;">License Number:</div>
		<div class="col-xs-4 col-xs-offset-2" style="padding-top:10px;">&nbsp;<input type="text" name="ctno" ></div>
	</div>
	<div class="row">
		<div class="col-xs-4 text-right" style="padding-top:10px;">Test Guage Make / Model:</div>
		<div class="col-xs-4 col-xs-offset-2" style="padding-top:10px;">&nbsp;<input type="text" name="tgmm" ></div>
	</div>
	<div class="row">
		<div class="col-xs-4 text-right" style="padding-top:10px;">Test Guage Serial No:</div>
		<div class="col-xs-4 col-xs-offset-2" style="padding-top:10px;">&nbsp;<input type="text" name="tgsn" ></div>
	</div>
	<div class="row">
		<div class="col-xs-4 text-right" style="padding-top:10px;">Test Guage Calibration Date:</div>
		<div class="col-xs-4 col-xs-offset-2" style="padding-top:10px;">&nbsp;<input type="text" name="tgcdate" id="datepickergc" ></div>
	</div>
	<div class="row">
		<div class="col-xs-8 text-center col-xs-offset-2" style="padding-top:10px;"><input type="submit" value="Register"></div>
	</div>
	<div class="row">
		<div class="col-xs-8 col-xs-offset-2" style="padding-top:10px;">&nbsp;</div>
	</div>
            </div>
        </form>
    </div>
</body>

</html>	

Open in new window


The issue here is in the function chk_vals. Note the javascript arrays tstr & lic. One of the rules here is to prevent duplicates of these, the code that starts with the lines

dok = true;
            for (i = 0; i < nu; i++) {

It allows duplicate values of Tester with no alert. The current duplicates of "Richrd Korts" are from a prior pass.

Why?

I assumed a Javascript syntax error & ran it in Firefox with Firebug turned on, no error.

Thanks
Richard KortsAsked:
Who is Participating?
 
Julian HansenConnect With a Mentor Commented:
trim() is not a JavaScript function - if you want to trim a value then you need to call the trim method on the string in other words
	function chk_vals() {
		if (document.st.firm.value == "" || document.st.faddr.value == "" || document.st.fcity.value == "" || document.st.fzip.value == "" || document.st.fphone.value == "" || document.st.tname.value == "" || document.st.ctno.value == "" || document.st.tgmm.value == "" || document.st.tgsn.value == "" || document.st.tgcdate.value == "" || document.st.pwd.value == "" || document.st.email.value == "" || document.st.pname.value == "") {
			alert("All form values required.");
			return false;
		}
		dok = true;
		for (i = 0; i < nu; i++) {
                        // NOTE THE USE OF trim() BELOW
			if (document.st.tname.value.trim() == tstr[i].trim()) {
				dok = false;
				break;
			}
			if (document.st.ctno.value.trim() == lic[i].trim()) {
				dok = false;
				break;
			}
		}
		if (! dok) {
			alert("Tester name & License number must be unique.");
			return false;
		}	
		if (tp == "u") {
			if (document.st.pwdr.value == "") {
				return true;
			}
		}		
		if (document.st.pwd.value != document.st.pwdr.value) {
			alert("Passwords do not match.");
			return false;
		}

		return true;
	}

Open in new window

0
 
Richard KortsAuthor Commented:
Julian,

Great, thanks I'll try that. I only was trying trim because the same values did not match, I assumed because the form value is NOT trimmed (has spaces).

Richard
0
 
Julian HansenCommented:
The form value should only have spaces if someone enters them - so probably a good idea to trim anyway.

I tested your code with the changes and it appears to work - if you don't come right post back and I will take a look. I am going off line for a bit to generate some melatonin - will pick up in the morning.
0
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

 
Richard KortsAuthor Commented:
Julian,

Fine, I am NOT in a huge hurry.

FYI, I have found in prior forms I have done in trying to match form values with others, if the form value is NOT trimmed, they do not match, but trimmed, they do.

Richard
0
 
Julian HansenCommented:
If there are javascript errors on the page then the validation function will not run and it may appear that the data is correct because validation code does not execute. I am not saying the data does not need to be trimmed but in this case the form works without the .trim() (see here

I have taken the liberty of reformatting your code to use JQuery - you can see it working  here
Source code below
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">

    <title>Backflow Assembly & Tester Information - Registration</title>
    <style>
        .nopadding {
            padding: 0 !important;
            margin: 0 !important;
        }
        
        .wrapper {
            max-width: 767px;
            min-width: 480px;
            margin: 0 auto;
        }
    </style>
<script>
var validation = [
  {
    type: 'tstr',
    value: 'Dan Todd'
  },
  {
    type: 'tstr',
    value: 'Richard Korts'
  },
  {
    type: 'tstr',
    value: 'Nolan Butterfras'
  },
  {
    type: 'lic',
    value: '#005, BPAT11021'
  },
  {
    type: 'lic',
    value: '#005, BPAT12345'
  },
  {
    type: 'lic',
    value: 'ABCD-1234'
  }
];
$(function() {
  $( "#datepickergc" ).datepicker();
  $('form').submit(function(e) {
    // Clear error indicators
    $('.has-error').removeClass('has-error');
    $('.error-box ul').empty().parent().hide();
    
    // Collect our form data that cannot be blank
    var formvars = $('.noblanks'),
      dok = true;
    
    // Loop through the validation fields and check no blanks
    for(var i = 0; i < formvars.length; i++) {
      var current = $(formvars[i]);
      if (current.val() == '') {
        dok = false;
        current.closest('.form-group').addClass('has-error');
      }
    }
    // If there was an error set the no blank error message
    if (!dok) {
      $('.error-box ul').append(
        $('<li/>').html('All form values required.')
      ).parent().show();
    }
    
    // Now check for duplicates using a validation array
    var tname = $('#tname').val();
    var ctno = $('#ctno').val();

    for(var i = 0; i < validation.length; i++) {
      if ((validation[i].type == 'tstr' && validation[i].value == tname) || 
        (validation[i].type == 'lic' && validation[i].value == ctno)) {
        $('.error-box ul').append(
          $('<li/>').html('Tester name &amp; License number must be unique.')
        ).parent().show();
        
        dok = false;
        break;
      }
    }    
    
    // Check for mismatched passwords
    var pwd = $('#pwd').val();
    if (pwd != '' && pwd !== $('#pwdr').val()) {
        $('.error-box ul').append(
          $('<li/>').html('Passwords do not match')
        ).parent().show();
        
        dok =false;
    }
    
    return dok;
  });
  });
</script>
</head>  
<body>
<div class="wrapper">
  <div class="alert alert-danger error-box" style="display: none" >
    <ul></ul>
  </div>
  <form method="POST" class="form-horizontal" name="st" action="proc_register.php?tp=" onxSubmit="return chk_vals();">
    <div class="container-fluid" style="background-color: #F3D9AF;">
      <div class="row" style="background-color: #F3D9AF;">
        <div class="col-xs-8 text-center col-xs-offset-2"><img src="images/bfp_logo_sm.jpg"></div>
      </div>
      <div class="row" style="background-color: #F3D9AF;">
        <div class="col-xs-8 text-center col-xs-offset-2" style="font-size:18px;"><b>Backflow Assembly & Test Report Form - Register</b></div>
      </div>
      <div class="form-group">
        <label class="col-xs-4 text-right control-label" for="pname">Your Name:</label>
        <div class="col-xs-4 col-xs-offset-2">
          <input class="form-control noblanks" id="pname" type="text" name="pname" placeholder="Full Name" />
        </div>
      </div>
      <div class="form-group">
        <label class="col-xs-4 text-right control-label" for="email"></label>
        <div class="col-xs-4 col-xs-offset-2">
          <input class="form-control noblanks" id="email" type="email" name="email" placeholder="Email Address"/>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-8 col-xs-offset-2">Password must be 8 or more, contain at least one number.</div>
      </div>  
      <div class="form-group">
        <label class="col-xs-4 text-right control-label" for="pwd">Password</label>
        <div class="col-xs-4 col-xs-offset-2">
          <input class="form-control noblanks" id="pwd" type="password" name="pwd" />
        </div>
      </div>
      <div class="form-group">
        <label class="col-xs-4 text-right control-label" for="pwdr">Repeat Password:</label>
        <div class="col-xs-4 col-xs-offset-2">
          <input class="form-control noblanks" id="pwdr" type="password" name="pwdr" />
        </div>
      </div>
      <div class="form-group">
        <label class="col-xs-4 text-right control-label" for="firm">Firm Name:</label>
        <div class="col-xs-4 col-xs-offset-2">
          <input class="form-control noblanks" id="firm" type="text" name="firm" placeholder="Firm Name"/>
        </div>
      </div>
      <div class="form-group">
        <label class="col-xs-4 text-right control-label" for="faddr">Firm Address:</label>
        <div class="col-xs-4 col-xs-offset-2">
          <input class="form-control noblanks" id="faddr" type="text" name="faddr" placeholder="Firm Address"/>
        </div>
      </div>
      <div class="form-group">
        <label class="col-xs-4 text-right control-label" for="fcity">Firm City:</label>
        <div class="col-xs-4 col-xs-offset-2">
          <input class="form-control noblanks" id="fcity" type="text" name="fcity" placeholder="Firm City"/>
        </div>
      </div>
      <div class="form-group">
        <label class="col-xs-4 text-right control-label" for="fcity">Firm Zip:</label>
        <div class="col-xs-4 col-xs-offset-2">
          <input class="form-control noblanks" id="fzip" type="text" name="fzip" placeholder="Firm Zip"/>
        </div>
      </div>
      <div class="form-group">
        <label class="col-xs-4 text-right control-label" for="fphone">Firm Phone:</label>
        <div class="col-xs-4 col-xs-offset-2">
          <input class="form-control noblanks" id="fphone" type="text" name="fphone" placeholder="Firm Phone"/>
        </div>
      </div>
      <div class="form-group">
        <label class="col-xs-4 text-right control-label" for="tname">Tester Name:</label>
        <div class="col-xs-4 col-xs-offset-2">
          <input class="form-control noblanks" id="tname" type="text" name="tname" placeholder="Tester Name"/>
        </div>
      </div>
      <div class="form-group">
        <label class="col-xs-4 text-right control-label" for="ctno">License Number:</label>
        <div class="col-xs-4 col-xs-offset-2">
          <input class="form-control noblanks" id="ctno" type="text" name="ctno" placeholder="License Number"/>
        </div>
      </div>
      <div class="form-group">
        <label class="col-xs-4 text-right control-label" for="tgmm">Test Guage Make / Model:</label>
        <div class="col-xs-4 col-xs-offset-2">
          <input class="form-control noblanks" id="tgmm" type="text" name="tgmm" placeholder="Test Guage Make / Model"/>
        </div>
      </div>
      <div class="form-group">
        <label class="col-xs-4 text-right control-label" for="tgsn">Test Guage Serial No:</label>
        <div class="col-xs-4 col-xs-offset-2">
          <input class="form-control noblanks" id="tgsn" type="text" name="tgsn" placeholder="Test Guage Serial No"/>
        </div>
      </div>
      <div class="form-group">
        <label class="col-xs-4 text-right control-label" for="tgcdate">Test Guage Calibration Date:</label>
        <div class="col-xs-4 col-xs-offset-2">
          <input class="form-control noblanks" id="tgcdate" type="text" name="tgcdate" placeholder="Test Guage Calibration Date"/>
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-2 col-sm-offset-8 text-right">
          <button type="submit" class="btn btn-default">Register</button>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-8 col-xs-offset-2" style="padding-top:10px;">&nbsp;</div>
      </div>
    </div>
  </form>
</div>
</body>
</html>

Open in new window

0
 
Richard KortsAuthor Commented:
I saw your jQuery solution, this is MUCH simpler if it works & it did.

I still see it odd about the trim. I assumed that the javascript property "value" used the full length of the field, including trailing spaces, because as I said in the past I had to trim data for similar reasons.

But you are implying that is not the case?

Thanks
0
 
Julian HansenCommented:
No, the textbox will return whatever is entered. If you enter a space after or before the content that will come through and you will need to trim it.

If you were doing a cut and paste as part of your testing that might have resulted in the extra space - sometimes copying captures an extra space from the source.

If it is a problem then simply chain the .trim() on to the .val() method.
0
 
Richard KortsAuthor Commented:
Julian,

I will go with the trim; you never know what the "general public" will do on a form.

Thanks for your timely help on this an a lot of other subjects. Stay tuned, I am sure I will have more.

I rely on EE as my lifeblood. A fantastic resource at minimal cost.

Richard
0
 
Julian HansenCommented:
You are most welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.