validating form javascript

Question

i have a form with the following validation rules:

<script type="text/javascript">
var errmsg;
function validate()
{
var textA= document.getElementById("text1");
var textC = document.getElementById("text3");
var txt1 = document.getElementById("text1").value;
var txt3 = document.getElementById("text3").value; 
var txt1_len = txt1.length;
var txt3_len = txt3.length;
 if(txt1_len == 0 || txt1_len > 50 || txt1_len < 10)
 {
  errmsg = "Error .";
  document.getElementById("ermsg").innerHTML = errmsg;
  textA.focus();
  return false;
 }
 
 else if(txt3_len == 0 || txt3_len > 30 || txt3_len < 10)
 {
  errmsg = "Invalid password!";
  document.getElementById("ermsg").innerHTML = errmsg;
  textC.focus();
  return false;
 }
 
 
 else
 {
  return true;
     
 }
 
return false;
}

</script>

these rules should alert the user if he enters less than 10 characters in the first field. I would like to know if i can alert the user as well if he doesn't enters some characters in that field.

For example if the user enters mynamehere i want him to enter my-name-here and also to restrict users to enter the email address in that field.

how can i achieve that using those rules?

thanks

I don't understand what additional rule you want to implement... Where does the user enters "mynamehere" : in `text1`? and what is "my-name-here" compared to "mynamehere"?...... — Samuel Caillerie, Sep 25 '14 at 13:08
yes he enters the username in txt1. mynamehere compared to my-name-here has the - character. so he should enter the correct form with - — miky2020, Sep 25 '14 at 13:19
So just add the corresponding rules in the corresponding `if`. For example : `if(txt1_len == 0 || ... || !/.+-.+-/.test(txt1))` (I have used a regex looking for 2 `-` in this field) and the same for the email field with the corresponding regex (see for example http://stackoverflow.com/a/46181/1127669) — Samuel Caillerie, Sep 25 '14 at 13:24
if(txt1_len == 0 || txt1_len > 50 || txt1_len < 10) and also how do i check if it uses the @ not to validate it in case users enter their email address? thanks!!! — miky2020, Sep 25 '14 at 13:29

score 0 · Answer 1 · edited Sep 25 '14 at 14:41

I have taken your snippet and edit it :

var errmsg;

function validate() {
  var textA = document.getElementById("text1");
  var textC = document.getElementById("text3");
  var txt1 = document.getElementById("text1").value;
  var txt3 = document.getElementById("text3").value;
  var txt1_len = txt1.length;
  var txt3_len = txt3.length;
  var $err = document.getElementById("ermsg");

  $err.innerHTML = "Everything is ok!";
  $err.style.color = "black";


  if (txt1_len == 0 || txt1_len > 50 || txt1_len < 10 || !/.+-.+-/.test(txt1)) {
    errmsg = "Error .";
    $err.innerHTML = errmsg;
    $err.style.color = "red";
    textA.focus();
    return false;
  } else if (txt3_len == 0 || txt3_len > 30 || txt3_len < 10 || !validateEmail(txt3)) {
    errmsg = "Invalid password!";
    $err.innerHTML = errmsg;
    $err.style.color = "red";
    textC.focus();
    return false;
  } else {
    return true;

  }

  return false;
}

function validateEmail(email) {
  var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9] {1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(email);
}

<input type="text" id="text1" />

<input type="text" id="text3" />

<button onclick="return validate();">Validate</button>

<p>
  <div id="ermsg"></div>
</p>

The test are at the end of the condition on txt1 and txt3 :

!/.+-.+-/.test(txt1)

and

!validateEmail(txt3)

EDIT :

The rule on field text1 seems to be : text should contains only numbers / letters / minus sign.

So you can change the rule with :

/^[a-z0-9\-]+$/i.test(txt1)

There are many RegExp tutorials on the web, for example :
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions

the email function is to validate or not to validate? i mean i need in the txt1 if he enters the email not to validate.i think we can also enter a rule to allow him only to enter the - character and nothing else — miky2020, Sep 25 '14 at 13:58
The email function is here to check if it is a correct email, that's why I have negated it. But for the rules, I don't know what are yours! I even don't know if `txt1` or `txt3` should be an email field, ... I have just put an example, after you have to adapt to your rules! — Samuel Caillerie, Sep 25 '14 at 14:02
the - char works perfect Thanks a lot! the fields must only have numbers and letters and the - char only nothing else. so if he enters me@me.com it should get the error on any field. — miky2020, Sep 25 '14 at 14:04
will that rule also allow me so he enters at least 3 - chars? — miky2020, Sep 25 '14 at 14:22

validating form javascript

1 Answers1