Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script>


function checkLength(text, min, max){

  if(text.length < min || text.length > max) {
    return false;
  }
  return true;
}


function compareValues(val1, val2){

  if(val1 > val2) {
    return -1;
  } else if(val2 > val1) {
        return 1;
  } else {
        return 0;
  }
}


function checkEmail(email) {

  if (!checkLength(email,6)) {
    return false;
  } else if (email.indexOf("@") == -1) {
        return false;
  } else if (email.indexOf(".") == -1) {
        return false;
  }
  else if (email.lastIndexOf(".") < email.lastIndexOf("@")) {
    return false;
  }
  return true;
}

    function validate(e) {
      var firstName = document.getElementById("FirstName").value;
      var midInit = document.getElementById("MidInit").value;
      var lastName = document.getElementById("LastName").value;
      var city = document.getElementById("City").value;
      var state = document.getElementById("State").value;
      var country = document.getElementById("Country").value;
      var zipCode = document.getElementById("Zip").value;
      var email = document.getElementById("Email").value;
      var userName = document.getElementById("Username").value;
      var password1 = document.getElementById("Password1").value;
      var password2 = document.getElementById("Password2").value;
      var errors = [];

      if(!checkLength(firstName,1,4)) {
        errors[errors.length]="You must enter a first name.";
      }
      if (!checkLength(midInit, 1, 1)) {
		errors[errors.length] = "You must enter a one-letter middle initial.";
	}

	if (!checkLength(lastName,1,100)) {
		errors[errors.length] = "You must enter a last name.";
	}

	if (!checkLength(city,1,100)) {
		errors[errors.length] = "You must enter a city.";
	}

	if (!checkLength(state, 2, 2)) {
		errors[errors.length] = "You must enter a state abbreviation.";
	}

	if (!checkLength(country,1,100)) {
		errors[errors.length] = "You must enter a country.";
	}

	if (!checkLength(zipCode, 5, 10)) {
		errors[errors.length] = "You must enter a valid zip code.";
	}
	if (!checkEmail(email)) {
		errors[errors.length] = "You must enter a valid email address.";
	}

	if (!checkLength(userName,1,100)) {
		errors[errors.length] = "You must enter a username.";
	}

    if (!checkLength(password1,1,100)) {
		errors[errors.length] = "You must enter a password.";
	} else if (compareValues(password1, password2) !== 0) {
		errors[errors.length] = "Passwords don't match.";
	}

    if(errors.length>0) {
      reportErrors(errors);
      e.preventDefault();
    }

    }

    function reportErrors(errors) {
      var msg = "Есть такие ошибки: \n";
      var numError;
      for(var i = 0; i < errors.length; i++) {
        numError = i+1;
        msg+="\n"+numError+". "+errors[i];
      }
      alert(msg);
    }

    window.onload = function() {
      document.getElementById("registrationform").addEventListener("submit", function(e){validate(e);});
    }
  </script>
</head>
<body>
<h1>Registration Form</h1>
<form method="post" action="hello.html" id="registrationform">
  <table border="0" cellspacing="2" cellpadding="2">
    <tr>
      <td>First Name:</td>
      <td><input type="text" name="FirstName" id="FirstName" size="20"></td>
    </tr>
    <tr>
        <td>Middle Initial:</td>
        <td><input type="text" name="MidInit" id="MidInit" size="2"></td>
      </tr>
      <tr>
        <td>Last Name:</td>
        <td><input type="text" name="LastName" id="LastName" size="20"></td>
      </tr>
      <tr>
        <td>City: </td>
        <td><input type="text" name="City" id="City" size="20"></td>
      </tr>
      <tr>
        <td>State: </td>
        <td><input type="text" name="State" id="State" size="2"></td>
      </tr>
      <tr>
        <td>Country:</td>
        <td><input type="text" name="Country" id="Country" size="20"></td>
      </tr>
      <tr>
        <td>Zip: </td>
        <td><input type="text" name="Zip" id="Zip" size="10"></td>
      </tr>
      <tr>
        <td>Email: </td>
        <td><input type="text" name="Email" id="Email" size="30"></td>
      </tr>
      <tr>
        <td>Username:</td>
        <td><input type="text" name="Username" id="Username" size="10"></td>
      </tr>
      <tr>
        <td>Password:</td>
        <td><input type="password" name="Password1" id="Password1" size="10"></td>
      </tr>
      <tr>
        <td>Repeat Password: </td>
        <td><input type="password" name="Password2" id="Password2" size="10"></td>
      </tr>
      <tr>
        <td colspan="2" align="center">
          <input name="submit" type="submit" value="Submit">
		  <input name="reset" type="reset" value="Reset Form">
        </td>
      </tr>
  </table>

</form>


<script id="jsbin-source-javascript" type="text/javascript">


</script></body>
</html>