Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Javascript Error or bug?

Posted on 2016-09-01
9
Medium Priority
?
70 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
9 Comments
 
LVL 59

Accepted Solution

by:
Julian Hansen earned 2000 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 59

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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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
 
LVL 59

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 59

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 59

Expert Comment

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

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

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…
This article discusses how to implement server side field validation and display customized error messages to the client.
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…

618 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