Form validation

  • (2 Pages)
  • +
  • 1
  • 2

18 Replies - 1145 Views - Last Post: 23 June 2015 - 06:00 AM

#1 spaz998   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 107
  • Joined: 29-July 14

Form validation

Posted 22 June 2015 - 09:08 PM

I had a look through the other couple of threads on form validation but it didn't solve my current problem.


After coding my join form with html5 patterns my teacher has told me he wants it done with JS.

so what it should do is if the contact mobile radio button is selected & the radio mobile input box DOES NOT contain the pattern return false.

my current console error is Uncaught SyntaxError: Unexpected token -
Dorm or Andrew why does it not like the argument?

 <!--
		    function validateMobile(radio-mobile-input){
				var patt = /[\(]\d{2}[\)]\d{8}/;
				
				if ((document.getElementById("radio-mobile").checked == true) && (patt.test(radio-mobile-input.value) == false)) {
					alert("Enter the correct format");
					return false;
				} // end if
			} // end function validateMobile




<input type="text" onblur="validateMobile(this);" name="radio-mobile-input" id="radio-mobile-input" maxlength="14" class="form_text_area_join" placeholder="Mobile E.g (04)12520102" accesskey="B"/>



Is This A Good Question/Topic? 0
  • +

Replies To: Form validation

#2 spaz998   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 107
  • Joined: 29-July 14

Re: Form validation

Posted 22 June 2015 - 09:33 PM

I also fixed my pattern using that rexex101 site thanks andrew that sites amazingly useful.

[\(][0]([2,3,6,7,8,9])[\)]\d{8}


Was This Post Helpful? 0
  • +
  • -

#3 andrewsw   User is online

  • never lube your breaks
  • member icon

Reputation: 6807
  • View blog
  • Posts: 28,137
  • Joined: 12-December 12

Re: Form validation

Posted 22 June 2015 - 10:59 PM

radio-mobile-input.value. These hyphens are read as minus signs by Javascript. You need to quote the id or name, so you could use document.getElementById("radio-mobile-input").value.
Was This Post Helpful? 1
  • +
  • -

#4 spaz998   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 107
  • Joined: 29-July 14

Re: Form validation

Posted 23 June 2015 - 12:38 AM

ah ok thats handy to know, I ended up solving the issue by doing it on submit instead of in the form. It feels so good when you solve one of these problems :gun_bandana:

I am very close but my expression test isn't working. one of my other If conditions is that if the radio-mobile-input box is empty it wont submit but the test If condition isnt working as I can put in any number and it will submit!

function validateForm() {
		   
				var landlinepatt = /[\(][0]([2,3,6,7,8,9])[\)]\d{8}/;
				var mobilepatt = /[\(][0]([4,5])[\)]\s\d{8}/;
				
				if ((document.getElementById("radio-mobile").checked == true) && (document.getElementById("radio-mobile-input").value != "") && (mobilepatt.test(radio-mobile-input.value) != true)) {
					alert("Enter the correct format");
					return false;
				} // end if






<input type="text" name="radio-mobile-input" id="radio-mobile-input" maxlength="14" class="form_text_area_join" placeholder="Mobile E.g (04)12520102" accesskey="B"/>


Was This Post Helpful? 0
  • +
  • -

#5 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4235
  • View blog
  • Posts: 13,423
  • Joined: 08-June 10

Re: Form validation

Posted 23 June 2015 - 01:11 AM

Quote

I am very close but my expression test isn't working.

itís not working for the same reason again.

that should cause a message in the error console.
Was This Post Helpful? 0
  • +
  • -

#6 spaz998   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 107
  • Joined: 29-July 14

Re: Form validation

Posted 23 June 2015 - 01:16 AM

didn't cause me one? I have ended up with a working pattern, it gives me an error when I hit submit if its not the right pattern, however if the correct pattern is given it doesn't submit.. It just clicks the button and does nothing.

if ((document.getElementById("radio-mobile").checked == true) && (mobilepatt.test (document.getElementById("radio-mobile-input").value) != true)) {
					alert("Enter the correct format");
					return false;
				} // end if


Was This Post Helpful? 0
  • +
  • -

#7 spaz998   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 107
  • Joined: 29-July 14

Re: Form validation

Posted 23 June 2015 - 01:24 AM

ill paste the entire form checking function so you can see the whole picture.

<!--
		   function validateForm() {
		   
				var landlinepatt = /[\(][0]([2,3,6,7,8,9])[\)]\s\d{8}/;
				var mobilepatt =  /[\(][0]([4,5])[\)]\d{8}/;
				
				if ((document.getElementById("radio-mobile").checked == true) && (mobilepatt.test (document.getElementById("radio-mobile-input").value) != true)) {
					alert("Enter the correct format");
					return false;
				} // end if
		
			  if (document.forms[0].surname.value == "") {
				 alert("Surname cannot be empty");
				 return false;
			  } // end if
			  
			  if (document.forms[0].othername.value == "") {
				 alert("Other name cannot be empty");
				 return false;
			  } // end if
			  
			  if ((document.getElementById("radio-email").checked == false) && (document.getElementById("radio-mobile").checked == false) && (document.getElementById("radio-landline").checked == false)) {
				 alert("Please select a contact method");
				 return false;
			  } // end if
			  
			  if ((document.getElementById("radio-email").checked == true) && (document.getElementById("radio-email-input").value == "")) {
				 alert("Please Enter an Email")
				 return false;
			  } // end if
			  
			  if ((document.getElementById("radio-mobile").checked == true) && (document.getElementById("radio-mobile-input").value == "")) {
				 alert("Please Enter a mobile in the correct format")
				 return false;
			  } // end if
			  
			  if ((document.getElementById("radio-landline").checked == true) && (document.getElementById("radio-landline-input").value == "")) {
				 alert("Please Enter a landline")
				 return false;
			  } // end if
			  
			  if ((document.getElementById("radio-email").checked == true) && ((document.getElementById("radio-landline-input").value != "")||(document.getElementById("radio-mobile-input").value != ""))) {
				 alert("Please enter only your selected contact method")
				 return false;
			  } // end if
			  
			  if ((document.getElementById("radio-mobile").checked == true) && ((document.getElementById("radio-email-input").value != "")||(document.getElementById("radio-landline-input").value != ""))) {
				 alert("Please enter only your selected contact method")
				 return false;
			  } // end if
			  
			  if ((document.getElementById("radio-landline").checked == true) && ((document.getElementById("radio-email-input").value != "")||(document.getElementById("radio-mobile-input").value != ""))) {
				 alert("Please enter only your selected contact method")
				 return false;
			  } // end if
			  
			  if ((document.getElementById("newsletter").checked == true) && ((document.getElementById("postal1").value == "")||(document.getElementById("postal2").value == "") || (document.getElementById("postcode").value == ""))) {
				 alert("Please complete address and postcode fields")
				 return false;
			  } // end if
			  
			  if (document.getElementById("password1").value != document.getElementById("password2").value)  {
				 alert("Your passwords didn't match")
				 return false;
			  } // end if
			  
			  if (document.getElementById("dropdown").value == "")  {
				 alert("Please Select an Occupation")
				 return false;
			  } // end if
			return true; 
			  } // end function validateForm
		   //-->





I have also noted that despite the pattern working some of my other If's now arent working which were before, like I have somehow made them unreachable?


If it makes it easier I can upload this to the school server and provide you a public link.

This post has been edited by spaz998: 23 June 2015 - 01:28 AM

Was This Post Helpful? 0
  • +
  • -

#8 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4235
  • View blog
  • Posts: 13,423
  • Joined: 08-June 10

Re: Form validation

Posted 23 June 2015 - 01:38 AM

thatís because your function returns a falsy value (undefined) when the test succeeds. you need to explicitly return true.

also note your RegExp patterns are incorrect:
- [\(], [0], [\)] a character class denotes a collection/group of characters. itís total overhead to use a character class for a single character. additionally, braces donít need to be escaped in character classes. in fact, the only special characters in a character class are ^, -, \, and to a certain degree ]
- [2,3,6,7,8,9], [4,5] are you sure you want to have the comma as valid character?

View Postspaz998, on 23 June 2015 - 10:24 AM, said:

I have also noted that despite the pattern working some of my other If's now arent working which were before, like I have somehow made them unreachable?

after the first failure you exit the function and hence do no further validation.

View Postspaz998, on 23 June 2015 - 10:24 AM, said:

If it makes it easier I can upload this to the school server and provide you a public link.

that would be nice. esp. if it always contains the actual code.
Was This Post Helpful? 0
  • +
  • -

#9 spaz998   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 107
  • Joined: 29-July 14

Re: Form validation

Posted 23 June 2015 - 01:38 AM

so its just supposed to be all togethor?

[235789] ?

and it would be just
/[\(]0([45])[\)]\d{8}/

thing with regex is it doesn't tell you if you do it badly :D

when I tested it in the test string box it gave me a match.

This post has been edited by spaz998: 23 June 2015 - 01:41 AM

Was This Post Helpful? 0
  • +
  • -

#10 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4235
  • View blog
  • Posts: 13,423
  • Joined: 08-June 10

Re: Form validation

Posted 23 June 2015 - 01:40 AM

yes. you could even use [236-9] (for you former case).
Was This Post Helpful? 0
  • +
  • -

#11 spaz998   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 107
  • Joined: 29-July 14

Re: Form validation

Posted 23 June 2015 - 01:57 AM

so I just did some further reading about this truthy falsy js stuff. I am struggling to understand why it suddenly goes from checking the ifs to not checking them. Your brain turns to mush after staring at the text editor all day.

right now its just completely ignoring the entire function. Can you see why?
Also does it check the ifs in logical order top-down?

tbh I was a little confused what you meant by explicitly returning true? you mean using a variable and setting it to true after going through the if's and returning it?

<!--
		   function validateForm() {
		   
			  if (document.forms[0].surname.value == "") {
				 alert("Surname cannot be empty");
				 return false;
			  } // end if
			  
			  if (document.forms[0].othername.value == "") {
				 alert("Other name cannot be empty");
				 return false;
			  } // end if
			  
			  if ((document.getElementById("radio-email").checked == false) && (document.getElementById("radio-mobile").checked == false) && (document.getElementById("radio-landline").checked == false)) {
				 alert("Please select a contact method");
				 return false;
			  } // end if
			  
			  if ((document.getElementById("radio-email").checked == true) && (document.getElementById("radio-email-input").value == "")) {
				 alert("Please Enter an Email")
				 return false;
			  } // end if
			  
			  if ((document.getElementById("radio-mobile").checked == true) && (document.getElementById("radio-mobile-input").value == "")) {
				 alert("Please Enter a mobile in the correct format")
				 return false;
			  } // end if
			  
			  if ((document.getElementById("radio-landline").checked == true) && (document.getElementById("radio-landline-input").value == "")) {
				 alert("Please Enter a landline")
				 return false;
			  } // end if
			  
			  if ((document.getElementById("radio-email").checked == true) && ((document.getElementById("radio-landline-input").value != "")||(document.getElementById("radio-mobile-input").value != ""))) {
				 alert("Please enter only your selected contact method")
				 return false;
			  } // end if
			  
			  if ((document.getElementById("radio-mobile").checked == true) && ((document.getElementById("radio-email-input").value != "")||(document.getElementById("radio-landline-input").value != ""))) {
				 alert("Please enter only your selected contact method")
				 return false;
			  } // end if
			  
			  if ((document.getElementById("radio-landline").checked == true) && ((document.getElementById("radio-email-input").value != "")||(document.getElementById("radio-mobile-input").value != ""))) {
				 alert("Please enter only your selected contact method")
				 return false;
			  } // end if
			  
			  if ((document.getElementById("newsletter").checked == true) && ((document.getElementById("postal1").value == "")||(document.getElementById("postal2").value == "") || (document.getElementById("postcode").value == ""))) {
				 alert("Please complete address and postcode fields")
				 return false;
			  } // end if
			  
			  if (document.getElementById("password1").value != document.getElementById("password2").value)  {
				 alert("Your passwords didn't match")
				 return false;
			  } // end if
			  
			  if (document.getElementById("dropdown").value == "")  {
				 alert("Please Select an Occupation")
				 return false;
			  } // end if
			  
			  var landlinepatt = /[\(][0]([2,3,6,7,8,9])[\)]\s\d{8}/;
			  var mobilepatt =  /[\(][0]([4,5])[\)]\d{8}/;
			  
			  if ((document.getElementById("radio-mobile").checked == true) && (mobilepatt.test (document.getElementById("radio-mobile-input").value) != true)) {
					alert("Enter the correct format");
					return false;
			  } // end if
			  
			  } // end function validateForm
		   //-->


This post has been edited by spaz998: 23 June 2015 - 01:58 AM

Was This Post Helpful? 0
  • +
  • -

#12 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4235
  • View blog
  • Posts: 13,423
  • Joined: 08-June 10

Re: Form validation

Posted 23 June 2015 - 02:00 AM

a public page would help. there are some points I would throw my suspicion at but I also lack knowledge of the form itself.
Was This Post Helpful? 1
  • +
  • -

#13 spaz998   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 107
  • Joined: 29-July 14

Re: Form validation

Posted 23 June 2015 - 02:17 AM

this is the form page

http://infotech.scu....urt25/join.html
Was This Post Helpful? 0
  • +
  • -

#14 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4235
  • View blog
  • Posts: 13,423
  • Joined: 08-June 10

Re: Form validation

Posted 23 June 2015 - 02:27 AM

why do you have the getDate() function as submit condition? since that returns undefined the condition cannot become true and hence JS skips the validation function.
Was This Post Helpful? 1
  • +
  • -

#15 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4235
  • View blog
  • Posts: 13,423
  • Joined: 08-June 10

Re: Form validation

Posted 23 June 2015 - 02:37 AM

PS. itís not nice to restrict the maximum length of a password. since you have to hash them anyways, they require at least 32 characters (for instance a bcrypt hash is ~60 characters long) in your storage device.
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2