I'm trying to create a form validation using HTML and pure JavaScript as a part of my assignment. However, the age and password validation don't seem to work even with tinkering a lot with code. The age is supposed to be valid if it is between 18 to 60 and the password must be the same as well as according to regex.
Here's the extended code:
Edit: the uage code has been edited but still doesn't work as intended.
function checkPassword(str) {
var re = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}$/;
return re.test(str);
}
function checkName(str) {
var ge = /^[a-zA-Z ]+$/;
return ge.test(str);
}
function mytq() {
var uname = document.forms.formvalidation.fullname;
var uemail = document.forms.formvalidation.email;
var uage = document.forms.formvalidation.age;
var upwd = document.forms.formvalidation.password;
var vpwd = document.forms.formvalidation.pwdrpt;
if (uname.value != "") {
if (!checkName(uname.value)) {
window.alert("Please enter a valid name");
uname.focus();
return false;
}
}
if (!(uage < 16 || uage > 60)) {
window.alert("Sorry you're not eligible for the position");
uage.focus();
return false;
}
if (uemail.value.indexOf("#", 0) < 0 && uemail.value.indexOf(".", 0) < 0) {
window.alert("Please enter a valid email");
uemail.focus();
return false;
}
if (upwd.value != "" && upwd.value == vpwd.value) {
if (!checkPassword(upwd.value)) {
window.alert("The password you entered is not valid");
upwd.focus();
return false;
}
}
return true;
}
<!DOCTYPE html>
<html>
<head>
<title>Register</title>
<script type="text/javascript">
</script>
</head>
<body>
<form name="formvalidation" method="POST" onsubmit="return mytq();" action="#">
<h1>Welcome to FTN.</h1>
<p>Fill this form before</p>
<hr>
<label for="name"><b>Full Name</b></label>
<input type="text" name="fullname" placeholder="Full Name" required>
<label for="email"><b>Email</b></label>
<input type="text" name="email" placeholder="Email" required>
<label for="age"><b>Age</b></label>
<input type="number" name="age" required>
<label for="password"><b>Password</b></label>
<input type="password" name="password" placeholder="Password" required>
<label for="password-repeat"><b>Re-type password</b></label>
<input type="password" name="pwdrpt" placeholder="Re-type Password" required>
<hr>
<p>By creating this account, you are agreeeing our terms and condition</p>
<button type="submit" class="registerbtn">Submit</button>
</form>
</body>
</html>
Your age comparison is flawed. If you wish to ensure that the age is greater than 16 and less than 60, you should simplify it to
if(uage < 16 || uage > 60) {
window.alert("Sorry you're not eligible for the position");
uage.focus();
return false;
}
So the two Functions (chForumular() and validate_user_text()) have both to be true to submit the form. Right now you cant send the form without fil in the username, age(in the code Alter) and your E-Mail. but the second function (validate_user_text) should check if there is any swear word in the message (=Nachricht) right know it submits the form after you fil in the three fields (e-mail, name and age). iven if you type in an swearword in the textarea. (something like: sorry ((asshole)))
If you dont understand a Word you think could be important just write the word to me so I can translate...(German and Swissgerman Words in the Code)
Here is my code so far:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/kontakt.css" media="screen">
<title>Kontaktseite</title>
<meta charset="utf-8">
<script type="text/javascript">
function chkFormular () {
if (document.Formular.User.value == "") {
alert("Enter your Name, Please!");
document.Formular.User.focus();
return false;
}
// if (document.Formular.Ort.value == "") {
// alert("Bitte Ihren Wohnort eingeben!");
// document.Formular.Ort.focus();
// return false;
// }
if (document.Formular.Mail.value == "") {
alert("Enter your E-Mail, please!");
document.Formular.Mail.focus();
return false;
}
if (document.Formular.Mail.value.indexOf("#") == -1) {
alert("No valid E-Mail, address!");
document.Formular.Mail.focus();
return false;
}
if (document.Formular.Alter.value == "") {
alert("Enter your Age, please!");
document.Formular.Alter.focus();
return false;
}
var chkZ = 1;
for (i = 0; i < document.Formular.Alter.value.length; ++i)
if (document.Formular.Alter.value.charAt(i) < "0" ||
document.Formular.Alter.value.charAt(i) > "9")
chkZ = -1;
if (chkZ == -1) {
alert("Your Age is not a Number!");
document.Formular.Alter.focus();
return false;
}
}
</script>
<script language="JavaScript1.2">
// Word Filter
// (c) 2002 Premshree Pillai
// http://www.qiksearch.com
// http://javascript.qik.cjb.net
var swear_words_arr=new Array("arschloch","idiot","terror", "wixer", "wixxer", "hure", "hurensohn", "hurenson", "motherfucker", "neger", "sauhund", "arsch", "fuck", "fucking", "shit", "satan",
"satanus", "figge", "ficken", "scheiss", "drecksjude", "drecksjud", "i hoff du stirbsch", "geh sterben", "verrecken", "verreck doch", "chrüppel", "krüppel", "chrüpel", "krüpel", "saftsack",
"sackratte", "god damit", "goddamit", "godvertammi", "gopfetammi", "chrüzsatan", "gottvertammi", "gottpfertami", "gopfeteckel", "verflucht", "verfluecht", "damisiech", "ich hoffe du stirbst",
"stirb", "geh sterben", "ass", "asshole", "cunt"); //corrected commas
var swear_alert_arr=new Array;
var swear_alert_count=0;
function reset_alert_count()
{
swear_alert_count=0;
}
function validate_user_text()
{
reset_alert_count();
var compare_text=document.Formular.user_text.value;
for(var i=0; i<swear_words_arr.length; i++)
{
for(var j=0; j<(compare_text.length); j++)
{
if(swear_words_arr[i]==compare_text.substring(j,(j+swear_words_arr[i].length)).toLowerCase())
{
swear_alert_arr[swear_alert_count]=compare_text.substring(j,(j+swear_words_arr[i].length));
swear_alert_count++;
}
}
}
var alert_text="";
for(var k=1; k<=swear_alert_count; k++)
{
alert_text+="\n" + "(" + k + ") " + swear_alert_arr[k-1];
}
if(swear_alert_count>0)
{
alert("The following Words are not allwoed:\n_______________________________\n" + alert_text + "\n_______________________________");
document.Formular.user_text.select();
}
else
{
document.Formular.submit();
}
}
function select_area()
{
document.Formular.user_text.select();
}
window.onload=reset_alert_count;
</script>
</head>
<body>
<h1>Kontaktformular</h1>
<nav>
<ul class="nav">
<li>Zurück</li>
</ul>
</nav>
<div id="part1">
<form name="Formular" action="http://www.formular-chef.de/fc.cgi" enctype="multipart/form-data" method="post" onSubmit="return chkFormular()">
<input type="hidden" name="empfaenger" value="benjamin.laubeX§Xbrueggli.ch">
<!--<input type="hidden" name="empfaenger" value="dominik.widmerX§Xbrueggli.ch">-->
</div>
<div id="part2">
<pre>
Name: <input type="text" size="40" name="User"><br>
E-Mail: <input type="text" size="40" name="Mail"><br>
Alter: <input type="text" size="40" name="Alter"><br>
Geschlecht: <select name="geschlecht">
<option selected>-</option>
<option>männlich</option>
<option>weiblich</option>
</select>
</div>
<p id="nachricht">Deine Nachricht:</p>
<div id="part3">
<textarea rows="10" cols="40" name="user_text" onclick="select_area()" placeholder="Ihre Nachricht..."></textarea>
</div>
<div id="part4">
Zum Absenden muss eine Internet-Verbindung bestehen!
<br><br>
<input type="submit" value="Absenden" onclick="validate_user_text();"><input type="reset" value="Abbrechen">
</div>
</pre>
</form>
</body>
</html>
This should do the trick:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/kontakt.css" media="screen">
<title>Kontaktseite</title>
<meta charset="utf-8">
<script type="text/javascript">
function chkFormular () {
if (document.Formular.User.value == "") {
alert("Enter your Name, Please!");
document.Formular.User.focus();
return false;
}
// if (document.Formular.Ort.value == "") {
// alert("Bitte Ihren Wohnort eingeben!");
// document.Formular.Ort.focus();
// return false;
// }
if (document.Formular.Mail.value == "") {
alert("Enter your E-Mail, please!");
document.Formular.Mail.focus();
return false;
}
if (document.Formular.Mail.value.indexOf("#") == -1) {
alert("No valid E-Mail, address!");
document.Formular.Mail.focus();
return false;
}
if (document.Formular.Alter.value == "") {
alert("Enter your Age, please!");
document.Formular.Alter.focus();
return false;
}
var chkZ = 1;
for (i = 0; i < document.Formular.Alter.value.length; ++i)
if (document.Formular.Alter.value.charAt(i) < "0" ||
document.Formular.Alter.value.charAt(i) > "9")
chkZ = -1;
if (chkZ == -1) {
alert("Your Age is not a Number!");
document.Formular.Alter.focus();
return false;
}
return true;
}
</script>
<script language="JavaScript1.2">
// Word Filter
// (c) 2002 Premshree Pillai
// http://www.qiksearch.com
// http://javascript.qik.cjb.net
var swear_words_arr=new Array("arschloch","idiot","terror", "wixer", "wixxer", "hure", "hurensohn", "hurenson", "motherfucker", "neger", "sauhund", "arsch", "fuck", "fucking", "shit", "satan",
"satanus", "figge", "ficken", "scheiss", "drecksjude", "drecksjud", "i hoff du stirbsch", "geh sterben", "verrecken", "verreck doch", "chrüppel", "krüppel", "chrüpel", "krüpel", "saftsack",
"sackratte", "god damit", "goddamit", "godvertammi", "gopfetammi", "chrüzsatan", "gottvertammi", "gottpfertami", "gopfeteckel", "verflucht", "verfluecht", "damisiech", "ich hoffe du stirbst",
"stirb", "geh sterben", "ass", "asshole", "cunt");
var swear_alert_arr=new Array;
var swear_alert_count=0;
function reset_alert_count()
{
swear_alert_count=0;
}
function validate_user_text()
{
reset_alert_count();
var compare_text=document.Formular.user_text.value;
for(var i=0; i<swear_words_arr.length; i++)
{
for(var j=0; j<(compare_text.length); j++)
{
if(swear_words_arr[i]==compare_text.substring(j,(j+swear_words_arr[i].length)).toLowerCase())
{
swear_alert_arr[swear_alert_count]=compare_text.substring(j,(j+swear_words_arr[i].length));
swear_alert_count++;
}
}
}
var alert_text="";
for(var k=1; k<=swear_alert_count; k++)
{
alert_text+="\n" + "(" + k + ") " + swear_alert_arr[k-1];
}
if(swear_alert_count>0)
{
alert("The following Words are not allwoed:\n_______________________________\n" + alert_text + "\n_______________________________");
document.Formular.user_text.select();
}
else
{
return true;
}
}
function select_area()
{
document.Formular.user_text.select();
}
window.onload=reset_alert_count;
</script>
</head>
<body>
<h1>Kontaktformular</h1>
<nav>
<ul class="nav">
<li>Zurück</li>
</ul>
</nav>
<div id="part1">
<form id="frmFormular" name="Formular" action="http://www.formular-chef.de/fc.cgi" enctype="multipart/form-data" method="post">
<input type="hidden" name="empfaenger" value="benjamin.laubeX§Xbrueggli.ch">
<!--<input type="hidden" name="empfaenger" value="dominik.widmerX§Xbrueggli.ch">-->
</div>
<div id="part2">
<pre>
Name: <input type="text" size="40" name="User"><br>
E-Mail: <input type="text" size="40" name="Mail"><br>
Alter: <input type="text" size="40" name="Alter"><br>
Geschlecht: <select name="geschlecht">
<option selected>-</option>
<option>männlich</option>
<option>weiblich</option>
</select>
</div>
<p id="nachricht">Deine Nachricht:</p>
<div id="part3">
<textarea rows="10" cols="40" name="user_text" onclick="select_area()" placeholder="Ihre Nachricht..."></textarea>
</div>
<div id="part4">
Zum Absenden muss eine Internet-Verbindung bestehen!
<br><br>
<input type="submit" id="sendButton" value="Absenden">
<input type="reset" value="Abbrechen">
<script>
document.getElementById('sendButton').onclick = function() {
if (chkFormular() && validate_user_text()) {
document.formular.submit();
return true;
} else {
return false;
}
}
</script>
</div>
</pre>
</form>
</body>
</html>
Just change the submit part.
onSubmit="return chkFormular() && validate_user_text()"
How to apply for work on IE7 , 8
for test, fill 1 into input and then press button , input will change border to red and return false.
But ie7 8 not work all.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form onsubmit="return checkform(this);">
<div>
<p>
<label>
<input type="text" class="price" size="20" name="price[]">
</label>
</p>
</div>
<div>
<p>
<label>
<input type="text" class="price" size="20" name="price[]">
</label>
</p>
</div>
<div>
<p>
<label>
<input type="text" class="price" size="20" name="price[]">
</label>
</p>
</div>
<input type="submit" name="submit" value="OK">
</form>
<script language="JavaScript" type="text/javascript">
function checkform ( form )
{
var list = document.querySelectorAll(".price");
var z;
var input;
var isValid = true;
var value;
// Loop through the list
for (z = 0; z < list.length; ++z) {
console.log("z = " + z);
// Get this input
input = list[z];
// Check its value
if (input.value != "" && parseInt(input.value, 10) < 1.5) {
input.style.border = "1px solid red";
isValid = false;
}
else {
input.style.border = "1px solid #d5d5c5";
}
}
// Return result
return isValid;
}
</script>
querySelectorAll is an HTML5 DOM API, IE7, 8 are not ready for it.
See this page for more info.
Alternatively, since you are using jquery, you can use $(".price") instead.
I have written the code so far and came up with this. I have to
Make sure the user input numbers into the text boxes and I was given errors using the Xhtml format, one, the '&&' sign gave me errors and due to online help, I was told I needed to use //
As I student learning Javascript I have no idea what this is or means, but as I placed it there, I was given more errors and my code crashed up after the javascript was added.
Thanks for the help in advance
<head>
<script type = 'text/javascript'>
// <![CDATA[
$('#submit').click(function(){
validateRange();
validateRa();
})
function validateRange() {
var txtVal = document.getElementById("CustomerID").value;
var txtVal1=parseInt(txtVal);
if (txtVal1 >= 3000 && txtVal1 <= 3999) {
return true;
}
else {
alert('Please enter a number between 3000-3999');
return false;
}
}
function validateRa() {
var txtVal1 = document.getElementById("AcctNo").value;
var txtVal2=parseInt(txtVal1);
if (txtVal2 >= 90000 && txtVal2 <= 99999) {
return true;
}
else {
alert('Please enter a number between 90000-99999');
return false;
}
}
// ]]
</script>
<title>Account Lookup</title>
</head>
<body>
<h1> Please Provide Your Information</h1>
<p><input type="text" id="AcctNo" value="Account Number"/></p>
<p><input type="text" id="CustomerID" value="CustomerID" onchange="validateRange()"/></p>
<p><input type="text" name="Type" value="Account Type" onchange="validateRange()"/></p>
<p><input type="text" name="balance" value="Balance"/></p>
<p class="submit" />
<input type="submit" name="commit" value="Submit" id="submit" /><button type="reset" value="Clear">Clear</button></p>
</body>
</html>
EDITED
try using this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#submit').click(function(){
validateRange();
validateRa();
});
});
function validateRange() {
var txtVal = document.getElementById("CustomerID").value;
var txtVal1=parseInt(txtVal);
if (txtVal1 >= 3000 && txtVal1 <= 3999) {
return true;
}
else {
alert('Please enter a number between 3000-3999');
return false;
}
}
function validateRa() {
var txtVal1 = document.getElementById("AcctNo").value;
var txtVal2=parseInt(txtVal1);
if (txtVal2 >= 90000 && txtVal2 <= 99999) {
return true;
}
else {
alert('Please enter a number between 90000-99999');
return false;
}
}
</script>
<html>
<title>Account Lookup</title>
<body>
<h1> Please Provide Your Information</h1>
<p><input type="text" id="AcctNo" value="Account Number"/></p>
<p><input type="text" id="CustomerID" value="CustomerID" onchange="validateRange()"/></p>
<p><input type="text" name="Type" value="Account Type" onchange="validateRange()"/></p>
<p><input type="text" name="balance" value="Balance" /></p>
<p class="submit" />
<input type="submit" name="commit" value="Submit" id="submit" /><button type="reset" value="Clear">Clear</button></p>
</body>
</html>
BTW the function validateRa missing the closing curly braces you need to add } before // ]]
function validateRa() {
var txtVal1 = document.getElementById("AcctNo").value;
var txtVal2=parseInt(txtVal1);
if (txtVal2 >= 90000 && txtVal2 <= 99999) {
return true;
}
else {
alert('Please enter a number between 90000-99999');
return false;
}
} //<= this is missing in your code
// ]]
I have following script running on my site. Users have to enter "testnumber" which is 10 character long. There is a length check validation. When users click on submit button my script does work smoothly.
But the problem is that when users press the enter key instead of mouse click, it does not warn the users. How can i change it so that when the users press the enter key this script will give the same message as they click on submit button?
<script type="text/javascript">
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
function formvalidation(form) {
var isSubmitting = false;
var value = document.getElementById('testnumber').value;
if (value.length == 10) {
if (isNumber(value)) {
isSubmitting = true;
}
}
if (isSubmitting) {
form.submit();
}
else {
alert('testnumber must be at least 10 character.');
return false;
}
}
</script>
This is the part of the html code:
<tr>
<td align="center">
<label>
<div align="left">
<span class="text7"><strong>enter testnumber:</strong></span>
<input name="testnumber" type="text" id="testnumber" size="50" value="<%=(testnumber)%>" />
<input name="search" id="search" type="button" class="normalmail" value="Search" onclick="formvalidation(frmSearch);" />
</div>
</label>
</td>
</tr>
Hope this will help
<from onsubmit="return formvalidation()">
<tr>
<td align="center">
<label>
<div align="left">
<span class="text7"><strong>enter testnumber:</strong></span>
<input name="testnumber" type="text" id="testnumber" size="50" value="<%=(testnumber)%>" />
<input name="search" id="search" type="button" class="normalmail" value="Search" onclick="formvalidation(frmSearch);" />
</div>
</label>
</td>
<!-- </tr></tr> -->
</form>
Your Script
<script type="text/javascript">
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
function formvalidation() {
var isSubmitting = false;
var value = document.getElementById('testnumber').value;
if (value.length > 10 && value.length < 10) {
alert('testnumber must be at least 10 character.');
return false
}
else if (isSubmitting) {
return true
}
else {
return false;
}
}
</script>