How to prevent user to enter space at the begining in textbox?

Question

I have a form with three fields Name, Email Address & Password. now i want to prevent the user to enter space " " at the start of value,let say user could not enter only spaces in the fields.

I tried to fix it like this:

<script type="text/javascript">
function validate(){

if ((document.getElementById('fName').value) == '') {
    alert('Please enter your first name');
    return (false);
} else if ((document.getElementById('lName').value) == '') {
    alert('Please enter your last name');
    return (false);
} else {
    return (true);
}
}
</script>
<form name="form1" id="form1" action="index.php" method="post">
<table align="right" border="0">
<tr>
<td>First Name:</td>
<td><input id="fName" name="fName" type="text" class="input-login"/></td>
</tr>
<tr><td>Email Address:</td></tr>
<tr><td><input id="email" name="email" type="text" class="input-login"/></td></tr>
<tr><td>Password:</td></tr>
<tr><td><input id="password" name="password" type="password" class="input-login"/>/td></tr>
<tr><td align="center"><a href="#">Forgot password</a></td></tr>
<tr>
<td align="center"><input name="login" id="login" type="submit" value="Login" > &nbsp;
<input name="signup" id="signup" type="submit" value="SignUp" ></td>
</tr>
</table>
</form>

but fail to fix.

can anyone help me.. Thanks.

Answer 1

Try to match whitespaces (\s):

(document.getElementById('fName').value.match(/^[ \s]/))

In your code:

if ((document.getElementById('fName').value) == '') ||  (document.getElementById('fName').value.match(/^[ \s]/)) { alert('Please enter your first name'); return (false); } else if ((document.getElementById('lName').value) == '') { alert('Please enter your last name'); return (false); }

This way your field values cannot start with a whitespace.

Answer 2

Since you tagged your question with jquery-validate. Here an Answer how to do it with jquery:

For more Information take a look at: http://docs.jquery.com/Plugins/Validation

<script type="text/javascript">
  $.validator.addMethod("NoWhiteSpaceAtBeginn", function(value, element) {
    return this.optional(element) || /^[^\t].*/.test(value);
  }, "Must not begin with a whitespace");
  $(document).ready(function(){
    $("#form1").validate();
  });
</script>

/^[^\t].*/ checks if the string starts with any character but a space, if you want to exclude all white spaces use /^[^\s].*/ instead. And now add the required and NoWhiteSpaceAtBeginn as class names to the fields you want to validate.

<form name="form1" id="form1" action="index.php" method="post">
  <table align="right" border="0">
    <tr>
      <td>First Name:</td>
      <td><input id="fName" name="fName" type="text" class="input-login required NoWhiteSpaceAtBeginn"/></td>
    </tr>
    <tr><td>Email Address:</td></tr>
    <tr><td><input id="email" name="email" type="text" class="input-login required NoWhiteSpaceAtBeginn email"/></td></tr>
    <tr><td>Password:</td></tr>
    <tr><td><input id="password" name="password" type="password" class="input-login"/>/td></tr>
    <tr><td align="center"><a href="#">Forgot password</a></td></tr>
    <tr>
      <td align="center"><input name="login" id="login" type="submit" value="Login" >&nbsp;<input name="signup" id="signup" type="submit" value="SignUp" ></td>
    </tr>
  </table>
</form>

A good tutorial can be found here: http://corpocrat.com/2009/07/15/quick-easy-form-validation-tutorial-with-jquery/

Answer 3

What usually is done is "trim" the string. Unfortunately JS doesn't have a native trim implementation, but one can easily written (search the web for alternatives):

var name = document.getElementById('fName').value.replace(/^\s+|\s+$/g, "");
if (name === "") { 
   ...

Remember you'll need to trim and re-validate everything server-side! Never trust pure client-side validation.