Required Field in a Form

[jamesnotjamie]

Hi,

I'm not massively experienced with JS, but have some experience with php so can read the code reasonably well.

I'm looking to make both fields on my html form required, just a simple alert window would do the trick. I've tried a few simple examples, but they don't seem to work with my form, I think it's because I have a little JS in the form itself, which could be conflicting.

Here is my form:

<form id="two" action=" " name=form method="post">
    <input name="email" id="email" type="text" value="E-Mail" onfocus="this.value=(this.value=='E-Mail') ? '' : this.value;" onblur="this.value=(this.value=='') ? 'E-Mail' : this.value;">
    <input name="city" id="city" type="text" value="City" onfocus="this.value=(this.value=='City') ? '' : this.value;" onblur="this.value=(this.value=='') ? 'City' : this.value;">    
  	<input id="button" type="submit" value="Get Free Track">
	</form>

I would like both fields to be required, like a say, a little alert would be just fine.

The sources I read and tried (unsuccessfully) were:
http://www.netmechanic.com/news/vol6/javascript_no4.htm
http://javascript.internet.com/forms...ed-fields.html
http://www.web-source.net/web_develo...orm_fields.htm

Could anyone point me in the right direction?

Thanks,
James

[Sterling Isfine]

<form id="two" action=" " name=form method="post" onsubmit=return reqd( email, city )>

...

<script type='text/javascript'>

function reqd( )
{
  var rv = true, elem;
  
  for( var i = 0; i < arguments.length && rv; i++ )
  {     
   if( !/\S/.test( ( elem = arguments[i] ).value ) || elem.value == elem.defaultValue )
   {
    alert( elem.name + ' required' );
    rv = false;
   }
  }

  return rv;
}

</script>

[tirna]

To validate any required form text fields you can simply check if they are empty or = null.

This w3schools tute of form validation gives some basic examples.

I would do something like this that displays all invalid inputs at the end of the function rather than 1 invalid field at the time.

function validateForm() {

var username = document.getElementById('txtUsername').value;
var password = document.getElementById('txtPassword').value;

var errMsg = "The following inputs are missing or invalid: \n\n";

var isDataValid = true;

if(username == '' || username == null) {  //add whatever other validation criteria you need between the ()
    isDataValid = false;
    errMsg = errMsg + "username\n";
}

if(password == '' || password == null) {   //add whatever other validation criteria you need between the ()
    isDataValid = false;
    errMsg = errMsg + "password\n";
}

//display any error messages
if(!isDataValid) {
   alert(errMsg);
}

return isDataValid;

} 

[Sterling Isfine]

The OP is using event handlers that restore empty fields to initial value, so just checking for "" or null isn't going to be appropriate.
What if password == " " ?

[tirna]

In the comments in the code I posted I clearly said the OP can add whatever additional criteria he/she needs to make the input valid.

I don't see any point in me making assumptions on what might or might not be valid.

If you read my signature below each post you will see anything I post is my opnion only and to be taken as general advice only.

I am not anyone's payroll here to give specific advice to every single post I reply to.

[jamesnotjamie]

Thanks for the replies. The first code didn't seem to do anything for me.

The second is in PHP, which although is much more understandable for me, unfortunately not what I need. I want the form to check for valid fields before the post action is taken...

The OP is using event handlers that restore empty fields to initial value, so just checking for "" or null isn't going to be appropriate.
What if password == " " ?

This is exactly my problem, and what was I was looking for some direction on...

Thanks,
James

[tirna]

Hi,

I'm not massively experienced with JS, but have some experience with php so can read the code reasonably well.

I'm not sure you even know what php code is. Where is the php code you claim to see in your last post?

I posted javascript code enclosed in php formatting tags which is what I have done in probably 99% of my posts.

In your first post you asked that fields be only required. Now you want them to be checked for validity, but you didn't specify what criteria will make each input valid. I'm not going to waste time making assumptions on what you would consider a valid input so I included a comment in my code saying you can add your own additional criteria.

If you need additional direction, it is quicker and easier for me to refer you to the relevent w3school tutorials where you can learn all the skills you will need rather than spoon feed code.

Good luck

[Sterling Isfine]

Thanks for the replies. The first code didn't seem to do anything for me.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<form id="two" action=" " name='form' method="post" onsubmit = "return reqd( email, city )">
<p>
  <input name="email" id="email" type="text" value="E-Mail" onfocus="this.value=(this.value=='E-Mail') ? '' : this.value;" onblur="this.value=(this.value=='') ? 'E-Mail' : this.value;">
    <input name="city" id="city" type="text" value="City" onfocus="this.value=(this.value=='City') ? '' : this.value;" onblur="this.value=(this.value=='') ? 'City' : this.value;">    
<input id="button" type="submit" value="Get Free Track">
</form>

<script type='text/javascript'>

function reqd( )
{
  var rv = true, elem;
  
  for( var i = 0; i < arguments.length && rv; i++ )
  {     
   if( !/\S/.test( ( elem = arguments[i] ).value ) || elem.value == elem.defaultValue )
   {
    alert( elem.name + ' required' );
    rv = false;
   }
  }

  return rv;
}

</script>

</body>
</html>

[jamesnotjamie]

Apologies tirna, for not making myself clearer. Indeed as I look back I got confused by the PHP opening tags (which I have never seen in your posts as I haven't subscribed to your wisdom). I did claim in my first post that I can read some PHP, but obviously, as everyone knows, we all start somewhere and I'm not as advanced as you.

I did even try and make the point about validity when I stated

I think it's because I have a little JS in the form itself, which could be conflicting.

Excuse my ignorance if I didn't refer to this as 'validity'.

I appreciated your first post for trying to help me out, however I didn't see the need to make me feel smaller than you.

I'm get pretty sick of joining forums, trying to be as informative as possible, and getting made to feel bad for asking the initial question! I never asked to be 'Spoon Fed'


Sterling Isfine, thank you that code worked perfectly. I'm going to try and break it apart to learn from it wherever possible.

Thanks,
James

[SMTS]

See my post a while back: http://www.webdeveloper.com/forum/sh...63&postcount=7

I think this may be of help to you.

[jamesnotjamie]

See my post a while back: http://www.webdeveloper.com/forum/sh...63&postcount=7

I think this may be of help to you.

Thanks, I'll have a read through this, might help me get to grips with it...