Solved

Javascript Error or bug?

Posted on 2016-09-01
9
31 Views
Last Modified: 2016-09-02
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
0
Comment
Question by:Richard Korts
  • 5
  • 4
9 Comments
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41780795
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
 

Author Comment

by:Richard Korts
ID: 41780806
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
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41780808
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
 

Author Comment

by:Richard Korts
ID: 41780867
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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41781085
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
 

Author Closing Comment

by:Richard Korts
ID: 41781753
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
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41781770
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
 

Author Comment

by:Richard Korts
ID: 41781832
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
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41781988
You are most welcome.
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now