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()"
Related
i am trying to redirect to another html page using
window.confirm('Login was successful')
{
window.location.href="logintest.html";
};
but it is not working. this is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Instructor Login Form</title>
<script>
function validate() {
var un = document.getElementById("username").value;
var pw = document.getElementById("password").value;
var valid = false;
var unArray = ["admin", "David", "Paul"];
var pwArray = ["123456789", "111", "911"];
for (var i = 0; i < unArray.length; i++) {
if ((un == unArray[i]) && (pw == pwArray[i])) {
valid = true;
break;
}
}
if (valid) {
window.confirm('Login was successful')
{
window.location.href="logintest.html";
};
return false;
}
if (!valid) {
window.confirm('Login failed')
{
window.location.href="test.html";
};
return false;
}
}
</script>
</head>
<body>
<form action = "{{ request.path }}" method = "POST" >
<div class="p1">
<p> Saudi Electronic University</p> </div>
<div class="container1">
<h1>Instructor Login </h1>
<input type="text" placeholder="Enter Username" name="username" id="username" >
<br>
<input type="password" placeholder="Enter Password" name="password" id="password">
<br>
<button class="button" id="submit" onclick="validate()" >Submit</button>
</div>
</form>
</body>
</html>
this is the function, maybe i need to have some validation here but i don't know:
#app.route('/test', methods=['GET', 'POST'])
def test():
return render_template("test.html")
There are some bracket issue in your code.
Try this:
if (valid) {
window.alert('Login was successful');
window.location.href="logintest.html";
}
else
{
window.alert('Login failed');
window.location.href="test.html";
}
return false;
Here is the complete solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Instructor Login Form</title>
</head>
<body>
<form id='form'>
<div class="p1"><p> Saudi Electronic University</p> </div>
<div class="container1">
<h1>Instructor Login </h1>
<input type="text" placeholder="Enter Username" name="username" id="username" >
<br>
<input type="password" placeholder="Enter Password" name="password" id="password">
<br>
<button type='submit'>Submit</button>
</div>
</form>
<script>
function validate(event) {
var un = document.getElementById("username").value;
var pw = document.getElementById("password").value;
var valid = false;
var unArray = ["admin", "David", "Paul"];
var pwArray = ["123456789", "111", "911"];
for (var i = 0; i < unArray.length; i++) {
if ((un == unArray[i]) && (pw == pwArray[i])) {
return true;
}
}
return false;
}
const form = document.getElementById('form');
form.addEventListener('submit', event => {
event.preventDefault();
if( validate() ) {
window.location.href = 'https://www.google.com';
} else {
alert('Bad credentials');
}
});
</script>
</body>
</html>
Try something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Instructor Login Form</title>
<script>
function validate() {
console.log("Validate clicked")
var un = document.getElementById("username").value;
var pw = document.getElementById("password").value;
var valid = false;
var unArray = ["admin", "David", "Paul"];
var pwArray = ["123456789", "111", "911", "admin"];
if (unArray.includes(un) && pwArray.includes(pw)) {
valid = true;
}
console.log(valid)
if (valid) {
if (window.confirm('Login was successful')) {
window.location.href = "logintest.html";
};
return false;
} else {
if (window.confirm('Login failed')) {
window.location.href = "test.html";
};
return false;
}
}
</script>
</head>
<body>
<form action="javascript:void(0)" method="POST">
<div class="p1">
<p> Saudi Electronic University</p>
</div>
<div class="container1">
<h1>Instructor Login </h1>
<input type="text" placeholder="Enter Username" name="username" id="username">
<br>
<input type="password" placeholder="Enter Password" name="password" id="password">
<br>
<button class="button" onclick="validate();">Submit</button>
</div>
</form>
</body>
</html>
You have to test if
window.confirm('Login failed')
was confiremd.
This is my javascript function.
function shortCutValidation() {
//var txtObjList = document.getElementsByTagName("input");
//for (var i = 0; i < txtObjList.length; i++) {
// if (txtObjList[i].getAttribute("type") == "text" && this.value != "") {
// // success for i+1 textbox
// }
// else {
// $(txtObjList).closest(".errortext").css("display", "block");
// }
//}
var data = document.getElementsByClassName("w-input");
if (data.length > 0) {
console.log("yes you are in");
for (var i = 0; i < data.length; i++) {
var myvalue = document.getElementsByClassName("w-input");
if (myvalue[i].value == '') {
console.log("yes value is empty"+myvalue[i].value);
$(myvalue[i]).next(".errortext").css("display", "block");
}
else {
console.log("thats ok");
$(data[i]).next(".errortext").css("display", "none");
}
console.log(i);
}
}
}
This is my html code.
<div class="myformgrp w-clearfix w-col">
<div class="w-col w-col-2 w-col-medium-3 w-col-small-12">
<label for="firstname" class="verticle-centerinline">First Name </label>
</div>
<div class="w-col w-col-10 w-col-medium-9 w-col-small-12">
<input type="hidden" id="id" name="id" value="" />
<input type="text" class="w-input" name="fname" id="fname" />
<div class="errortext" style="display:none">required field</div>
</div>
</div>
<div class="myformgrp w-clearfix w-col">
<div class="w-col w-col-2 w-col-medium-3 w-col-small-12">
<label for="firstname" class="verticle-centerinline">Last Name </label>
</div>
<div class="w-col w-col-10 w-col-medium-9 w-col-small-12">
<input type="text" class="w-input" name="lname" id="lname" /><br />
<div class="errortext" style="display:none">required field</div>
</div>
</div>
The problem is that I can't validate all the text box at once
but my for loop is working as expected.
I use jQuery to call the shortCutValidation function.
All I want is when my blur event is called to validate all the text box at once and the error massage should be displayed.
Try This
function validateFormOnSubmit(contact) {
reason = "";
reason += validateName(contact.name);
reason += validateEmail(contact.email);
reason += validatePhone(contact.phone);
reason += validatePet(contact.pet);
reason += validateNumber(contact.number);
reason += validateDisclaimer(contact.disclaimer);
if (reason.length > 0) {
return false;
} else {
return false;
}
}
// validate required fields
function validateName(name) {
var error = "";
if (name.value.length == 0) {
name.style.background = 'Red';
document.getElementById('name-error').innerHTML = "The required field has not been filled in";
var error = "1";
} else {
name.style.background = 'White';
document.getElementById('name-error').innerHTML = '';
}
return error;
}
// validate email as required field and format
function trim(s) {
return s.replace(/^\s+|\s+$/, '');
}
function validateEmail(email) {
var error = "";
var temail = trim(email.value); // value of field with whitespace trimmed off
var emailFilter = /^[^#]+#[^#.]+\.[^#]*\w\w$/;
var illegalChars = /[\(\)\<\>\,\;\:\\\"\[\]]/;
if (email.value == "") {
email.style.background = 'Red';
document.getElementById('email-error').innerHTML = "Please enter an email address.";
var error = "2";
} else if (!emailFilter.test(temail)) { //test email for illegal characters
email.style.background = 'Red';
document.getElementById('email-error').innerHTML = "Please enter a valid email address.";
var error = "3";
} else if (email.value.match(illegalChars)) {
email.style.background = 'Red';
var error = "4";
document.getElementById('email-error').innerHTML = "Email contains invalid characters.";
} else {
email.style.background = 'White';
document.getElementById('email-error').innerHTML = '';
}
return error;
}
// validate phone for required and format
function validatePhone(phone) {
var error = "";
var stripped = phone.value.replace(/[\(\)\.\-\ ]/g, '');
if (phone.value == "") {
document.getElementById('phone-error').innerHTML = "Please enter a phone number";
phone.style.background = 'Red';
var error = '6';
} else if (isNaN(parseInt(stripped))) {
var error = "5";
document.getElementById('phone-error').innerHTML = "The phone number contains illegal characters.";
phone.style.background = 'Red';
} else if (stripped.length < 10) {
var error = "6";
document.getElementById('phone-error').innerHTML = "The phone number is too short.";
phone.style.background = 'Red';
} else {
phone.style.background = 'White';
document.getElementById('phone-error').innerHTML = '';
}
return error;
}
function validatePet(pet) {
if ((contact.pet[0].checked == false) && (contact.pet[1].checked == false) && (contact.pet[2].checked == false)) {
document.getElementById('pet-error').innerHTML = "Pet required";
var error = "2";
} else {
document.getElementById('pet-error').innerHTML = '';
}
return error;
}
function validateNumber(number) {
var num = document.forms["contact"]["number"];
var y = num.value;
if (!isNaN(y)) {
//alert('va');
if (y < 0 || y > 50) {
//Wrong
number.style.background = 'Red';
document.getElementById("number-error").innerHTML = "Must be between 0 and 50.";
var error = "10";
} else {
//Correct
number.style.background = 'White';
document.getElementById("number-error").innerHTML = "";
}
return error;
} else {
document.getElementById("number-error").innerHTML = "Must be a number.";
var error = "3";
}
return error;
}
function validateDisclaimer(disclaimer) {
var error = "";
if (document.getElementById("disclaimer").checked === false) {
document.getElementById('disclaimer-error').innerHTML = "Required";
var error = "4";
} else {
document.getElementById('disclaimer-error').innerHTML = '';
}
return error;
}
.error {
color: #990000;
}
input::-webkit-input-placeholder {
color: white !important;
}
input:-moz-placeholder { /* Firefox 18- */
color: white !important;
}
input::-moz-placeholder { /* Firefox 19+ */
color: white !important;
}
input:-ms-input-placeholder {
color: white !important;
}
<form id="contact" name="contact" onsubmit="return validateFormOnSubmit(this)" action="" method="post">
<div>
<label>First Name</label>
<input placeholder="First Name" type="text" name="name" id="name" tabindex="1" autofocus />
<div id="name-error" class="error"></div>
</div>
<div>
<label>Nickname</label>
<input placeholder="Nickname" type="text" name="nickname" id="nickname" tabindex="2" autofocus />
</div>
<div>
<label>Email</label>
<input placeholder="Email" type="email" name="email" id="email" tabindex="3" autofocus />
<div id="email-error" class="error"></div>
</div>
<div>
<label>Phone</label>
<input placeholder="Phone" type="tel" name="phone" id="phone" tabindex="4" autofocus />
<div id="phone-error" class="error"></div>
</div>
<div>
<label>I prefer</label>
<input type="radio" name="pet" id="Dogs" tabindex="5" autofocus />Dogs
<input type="radio" name="pet" id="Cats" tabindex="6" autofocus />Cats
<input type="radio" name="pet" id="Neither" tabindex="7" autofocus />Neither
<div id="pet-error" class="error"></div>
</div>
<div>
<label>My favorite number between 1 and 50</label>
<input placeholder="Favorite number between 1 and 50" type="text" name="number" id="number" tabindex="8" autofocus />
<div id="number-error" class="error"></div>
</div>
<div>
<label>Disclaimer</label>
<input type="checkbox" name="disclaimer" id="disclaimer" tabindex="9" autofocus />I confirm that all the above information is true.
<div id="disclaimer-error" class="error"></div>
</div>
<div>
<button type="submit" name="submit" id="submit" tabindex="10">Send</button>
</div>
</form>
Happy Coding
i want pass the 45 second quickly using console or java script.form a page now how can I do tis ..
the page Html is
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Appointment Login</title>
<link href="css/Online_regular.css" rel="stylesheet" type="text/css">
<link href="css/jquery_theme_tvoa.css" rel="stylesheet" type="text/css">
<link rel="icon" href="images/favicon.ico">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/declarations.js?rev=05082016"></script>
<style>
#form_info{
display:none;
position: fixed;
margin:0 auto;
top: 1%;
left: 50%;
margin-left: -25%;
width: 50%;
height: 50%;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 1;
z-index: 10000;
}
#overlay{
width:100%;
height:100%;position: fixed;
z-index:0;
top: 0;
left:0;
background:rgba(0,0,0,0.5);
}
ul.form_info_list {
font-weight: bold;
}
ul.form_info_list li {
font-weight: normal;
}
.know_req_info_span{
color:#2080c9;
font-size: 1.1em;
cursor:pointer;
}
ul.errorMessage li{
list-style-type: none;
color:red;
}
</style>
<script>
function refreshCaptcha()
{
try
{
var d = new Date();
var n = d.getTime();
//document.getElementById("capt").src="images/1.jpg";
//alert("hi");
document.getElementById("capt").src = "captcha?rand=" + n;
}
catch (e)
{
alert(e);
}
return false;
}
function image_loaded() {
var width = $('#capt').css('width');
if (width === 200 || width === "200px" || width === '200px') {
$('#label1').html("Access Code");
$('#label2').html("Enter Access Code");
}
else {
$('#label1').html("Question");
$('#label2').html("Answer");
}
}
window.onload = function () {
document.onkeydown = function (e) {
return (e.which || e.keyCode) != 116;
}
}
$(document).ready(function () {
});
</script>
</head>
<body onload="backButtonOverride()">
<br>
<div class="wrapper">
<div class="pageHeader"></div>
<div class="pageHeading1 text_center">
Appointment Login
<img src="./images/home.png" style=" width: 30px; height:26px;" align="right">
</div>
<div class="container">
<div class="form_container">
<form method="post" autocomplete="off" action="Get_Appointment" onsubmit="return validate_appointmentLogin_form();">
<!--onsubmit="return validate_appointmentLogin_form()" -->
<div class="row text_center" id="generate_otp_msg" style="font-weight:bold;font-size: 14px;padding-bottom: 10px;color:#BF0D0D">
</div>
<div class="row">
<div class="col-31"></div>
<div class="col-32">
<input name="otp_required" value="generate_otp" id="generate_otp" onclick="otpmgt()" type="radio"> I want to Generate OTP
<br>
<input name="otp_required" value="have_otp" id="have_otp" onclick="otpmgt()" type="radio">I have received OTP
<br><input name="otp_required" value="send_alotment_sms" id="send_alotment_sms" onclick="otpmgt()" type="radio"> Re-send Appointment Confirmation SMS.</div>
<div class="col-33"></div>
</div>
<div class="row">
<div class="col-31 mandatory">Application Id</div>
<div class="col-32"><input name="filerfno" id="application_id" size="50" maxlength="12" title="Please Enter your Application Id" value="" type="text"></div>
<div class="col-33">Please enter application id</div>
</div>
<div class="row">
<div class="col-31 mandatory">Passport Number</div>
<div class="col-32"><input name="passport_no" id="passport_no" size="50" maxlength="14" title="Please Enter your Passport No. As in Passport" value="" type="text"></div>
<div class="col-33">Please enter passport no</div>
</div>
<div class="row">
<div class="col-31 mandatory"> <img src="DisplayDynamicField1"></div>
<div class="col-32"><input name="121658" class="textBoxDashed app_field" size="20" maxlength="50" onkeyup="chkString(this)" onblur="trim1(this);" type="text"></div>
<div class="col-33"></div>
</div>
<div class="row">
<div class="col-31 mandatory"> <img src="DisplayDynamicField2"></div>
<div class="col-32"><input name="813988" class="textBoxDashed app_field" size="20" maxlength="50" onkeyup="chkString(this)" onblur="trim1(this);" type="text"></div>
<div class="col-33"></div>
</div>
<div class="row cotp" style="">
<div class="col-31 mandatory ">OTP</div>
<div class="col-32"><input name="otp" id="otp" size="50" maxlength="6" value="" type="password"></div>
<div class="col-33"></div>
</div>
<div class="row">
<div class="col-1" id="label1">Question</div>
<div class="col-2"> <img src="captcha" id="capt" onload="image_loaded();" style="display: inline">
</div>
<div class="col-3"><img src="images/refresh.png" style="width:30px;height:30px;display: inline"></div>
</div>
<div class="row">
<div class="col-1 mandatory" id="label2">Answer</div>
<div class="col-2"><input name="captcha" id="captcha" maxlength="20" type="text"></div>
<div class="col-3 errorify" style="list-style-type: none"> <ul class="errorMessage">
<li><span>Invalid Captcha</span></li> </ul>
You can submit request after 32 seconds
</form>
</div>
<br><br>
<b>Instructions for Appointment</b>
<ul class="instructions_ul text_bold">
<li>Applicants for tourist visa need an appointment date to submit their applications at IVACs</li>
<li> A one-time password (OTP) will be sent to mobile phone of the applicant which is required for securing the appointment date.</li>
<li>Applicants should fill in their details carefully and provide the correct mobile number.</li>
<li>The appointment will be sent as an SMS on the mobile phone of the applicant. This SMS should be shown by the applicant at the IVAC Center to enter and deposit the application</li>
<li>OTP can be generated only after the appointment time starts. </li>
<li>Appointment can be booked only after logging in using OTP. </li>
<li>OTP is valid for 20 minutes.</li>
<li>Maximum 3 OTPs can be generated on a given day for a File Number.</li>
</ul>
</div>
</div>
<script>
function generate_otp(filerfno_var,passport_no_var) {
$('#error_msg').html('');
var value1_var=document.getElementsByClassName("app_field")[0].value;
var value2_var=document.getElementsByClassName("app_field")[1].value;
if(document.getElementById('generate_otp').checked == true)
var otp_required_var="generate_otp";
else if(document.getElementById('have_otp').checked == true)
var otp_required_var="have_otp";
else if(document.getElementById('send_alotment_sms').checked == true)
var otp_required_var="send_alotment_sms";
var otp_var=document.getElementById("otp").value;
var captcha_var=document.getElementById("captcha").value;
//http://localhost:8084/struts_bgd/json/GenerateOtp?filerfno=BGDDV0004116&passport_no=PASS123&value1=TEST&value2=TEST
$.ajax({
type: "POST",
url: "json/GenerateOtp",
dataType: "json",
data: {filerfno : filerfno_var,passport_number:passport_no_var,value1:value1_var,value2:value2_var,otp_required:otp_required_var,otp:otp_var,captcha:captcha_var},
success: function (data) {
//alert(data['sms_output']);
alert(data);
$('#generate_otp_msg').text(data);
refreshCaptcha();
$('#captcha').val('');
$('#have_otp').prop('checked', false);
$('#generate_otp').prop('checked', false);
$('#send_alotment_sms').prop('checked', false);
}
})
.done(function (data) {
})
.fail(function () {
alert("Some problem occurred");
})
.always(function () {
});
}
var refreshIntervalId;
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
refreshIntervalId = setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? minutes : minutes;
seconds = seconds < 10 ? seconds : seconds;
// display.text(minutes + ":" + seconds);
display.text(seconds);
$('#timer_msg').html('You can submit request after '+seconds+' seconds');
if (--timer < 0) {
$('#timer_msg').html('<input name="submit_btn" id="btn1" type="submit" class="btn btn-primary" value="Submit">');
return;
}
}, 1000);
}
function otpmgt() {
var otp_check = null;
$('#error_msg').html('');
if (document.getElementById('have_otp').checked == true)
{
otp_check = document.getElementById('have_otp').value;
$('.cotp').css('display', '');
$('#otp').prop('disabled', false);
//call timer function
$('#timer_msg').html('');
startTimer(45, $('#btn_time'));
document.getElementById("otp").disabled = false;
}
else if (document.getElementById('generate_otp').checked == true)
{ //submit request through ajax
clearInterval(refreshIntervalId);
alert("OTP will be sent to your registered mobile number.");
otp_check = document.getElementById('generate_otp').value;
$('.cotp').css('display', 'none');
$('#otp').val('');
$('#otp').prop('disabled', true);
$('.cappt_mobile').css('display', '');
$('#btn1').val('Generate OTP');
document.getElementById("otp").disabled = true;
//display submit button now
$('#timer_msg').html('<input name="submit_btn" id="btn1" type="submit" class="btn btn-primary" value="Generate OTP" >');
} else if (document.getElementById('send_alotment_sms').checked == true)
{
clearInterval(refreshIntervalId);
otp_check = document.getElementById('send_alotment_sms').value;
$('.cotp').css('display', 'none');
$('#otp').val('');
$('#otp').prop('disabled', true);
$('.cappt_mobile').css('display', 'none');
document.getElementById("otp").disabled = true;
$('#timer_msg').html('<input name="submit_btn" id="btn1" type="submit" class="btn btn-primary" value="Send Allotment SMS" >');
}
}
function validate_appointmentLogin_form() {
var f1 = document.getElementsByClassName('app_field')[0].value;
var f2 = document.getElementsByClassName('app_field')[1].value;
var otp_value = document.getElementById("otp").value;
var otp_length = otp_value.length;
var otp_required_val = "";
var otp_required_check = ($('input[type=radio]:checked').size() > 0);// false
var submit = true;
var result = "";
if (document.getElementById('application_id') != undefined) {
result = validate_filenumber($('#application_id').val(), 1);
if (result != "true")
{
errorify($('#application_id'), result);
submit = false;
}
else
{
correctify($('#application_id'), "Please enter application id");
}
}
if (document.getElementById('passport_no') != undefined) {
result = validate_passportNo($('#passport_no').val(), 1);
if (result != "true")
{
errorify($('#passport_no'), result);
submit = false;
}
else
{
correctify($('#passport_no'), "");
}
}
//if(f1 == null || f1.value == "" || isEmpty(f1)||f1.length==0)
if (f1 == "" || f1.length == 0)
{
result = validate_passportNo(f1, 1);
errorify($(document.getElementsByClassName('app_field')[0]), "Please enter all mandatory details");
submit = false;
} else
{
correctify($(document.getElementsByClassName('app_field')[0]), "");
}
if (f2 == "" || f2.length == 0)
{
//alert("Please Enter All mandtory fields"+document.getElementsByClassName('app_field')[1]);
errorify($(document.getElementsByClassName('app_field')[1]), "Please enter all mandatory details");
submit = false;
}
else
{
correctify($(document.getElementsByClassName('app_field')[1]), "");
}
if (otp_required_check)
{
correctify($('#have_otp'), "");
if (document.getElementById('have_otp').checked == true && otp_value.length == 0) {
errorify($('#otp'), "Please enter otp");
submit = false;
// alert("Have OTP and Length= 0. Submit = " + submit);
}
else
{
correctify($('#otp'), "");
}
if (document.getElementById('have_otp').checked == true && otp_value.length < 6) {
errorify($('#otp'), "Please enter correct otp");
submit = false;
// alert("Have OTP and Length< 6. Submit = " + submit);
}
else
{
correctify($('#otp'), "");
}
}
else
{
errorify($('#have_otp'), "Please select at least one option.");
submit = false;
}
if (document.getElementById('captcha') != undefined) {
result = validate_captcha($('#captcha').val(), 1);
if (result != "true")
{
errorify($('#captcha'), result);
submit = false;
}
else
{
correctify_lowercase($('#captcha'), "");
}
}
//if generate otp is clicked then submit function by ajax else submit to action
if(document.getElementById('generate_otp').checked == true && submit == true){
//call ajax function to generate otp
//disable submit button here
generate_otp($('#application_id').val(),$('#passport_no').val());
submit=false;
}
return submit;
}
</script>
enter image description here
please help me to do this..
// store the current time (when the script loads)
var start = new Date();
// in the form submit event
function submit(e) {
if (new Date() - start < 45000) {
// stop the form submitting
e.preventDefault();
// show the message
msg45secs.style.display = "block";
}
else {
// whatever you want to do if the time checks out
// if you want to just let it submit, you don't need to do anything. you can remove the `else` if you like.
}
}
I'm working on my first Javascript document and I'm not sure what's wrong with this code. I've had my more experienced friend look at it and he can't find anything wrong either. The validators do not output a warning message when I enter something into the fields.
<!DOCTYPE html>
<html>
<head>
<title>Payment Form</title>
<link rel="stylesheet" type="text/css" href="paymentform.css">
<script type="text/javascript">
function validateCard() {
var x = document.getElementById("1").value;
if (x.length < 16) {
alert("Card Number must be 16 numbers long");
return false;
}
}
function validateCVC() {
var x = document.getElementById("2").value;
if (x.length != 3) {
alert("CVC must be 3 digits long");
return false;
}
}
function validateName() {
var x = document.getElementById("3").value;
if (x == "") {
alert("Please enter a name");
return false;
}
}
function validateMonth() {
var x = document.getElementById("4").value;
if (x < 1 || > 12 || x == "") {
alert("Must be a number between 1 and 12");
return false;
}
}
function validateYear() {
var x = document.getElementById("5").value;
if (x < "2016" || x == null){
alert("Must be the year 2016 or higher");
return false;
}
}
function allfuncs() {
validateCard();
validateCVC();
validateName();
validateMonth();
validateYear();
}
</script>
</head>
<img src="BlackBot logo.png" alt="Black Bot Computers" width="200px" height="100px">
</h1>
<h1 align="center">Payment Form</h1>
<HR COLOR="green" WIDTH="60%">
<body>
<br>
<center><form onSubmit="allfuncs()">
<br>
<div class="form-row">
<label>Card number</label>
<input id="1" class="card-number" type="text" size="20" />
</div>
<br>
<div class="form-row">
<label>CVC</label>
<input id="2" class="card-cvc" type="text" size="4" />
</div>
<br>
<div class="form-row">
<label>Name</label>
<input id="3" class="card-holdername" type="text" size="20" />
</div>
<br>
<div class="form-row">
<label>Expiry date (MM/YYYY)</label>
<input id="4" class="card-expiry-month" type="text" size="2" />
<span></span>
<input id="5" class="card-expiry-year" type="text" size="4" />
</div>
<br>
<br>
<input type="submit" value="Submit">
<br>
<br>
</form></center>
</body>
</html>
If anyone can help find a problem it would be a big help!
My console is showing an error in your validateMonth() function . Specifically # if (x < 1 || > 12 || x == "").Just modify your if statement to the following:
function validateMonth() {
var x = document.getElementById("4").value;
if (x < 1 || x > 12 || x == "") {
alert("Must be a number between 1 and 12");
return false;
}
}
This should fix your error .
You need to tell the form not to continue if validation fails. This is done by returning false to the onSubmit call in your example. Here's what you need to change in the js.
function allfuncs() {
if(!validateCard()){return false;}
if(!validateCVC()){return false;}
if(!validateName()){return false;}
if(!validateMonth()){return false;}
if(!validateYear()){return false;}
return true;
}
Then change your form call to this.
<form onSubmit="return allfuncs();">
As pointed out in other comments and answers, you also have a syntax error that is fixed by this.
if (x < 1 || x > 12 || x == "") {
validateType(), validateStatus(), validateMessage() does not work.
any ideas?
validateEmail() and validateName() works.
I been trying to debug this for a while without any luck. I have exhausted myself.
Thank you for the help!
The form is called contact.
<html>
<head>
<title>Student Contact Form</title>
<link rel="stylesheet" type="text/css" href="homeStyle.css">
<script type="text/javascript">
function focus()
{
name1.focus();
}
function javaScriptValidation()
{
if (validateName() == false)
{
return false;
}
if (validateEmail() == false)
{
return false;
}
if (validateSubject() == false)
{
return false;
}
if (validateType() == false)
{
return false;
}
if (validateStatus() == false)
{
return false;
}
if (validateMessage() == false)
{
return false;
}
return true;
}
function validateName()
{
var letters = /^[A-Za-z]+$/;
if (!letters.test(name1.value))
{
alert("Invalid Name (only letters)");
name1.focus();
return false;
}
}
function validateEmail()
{
var letters = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!letters.test(email.value))
{
alert("Invalid Email");
email.focus();
return false;
}
}
function validateType()
{
var listSelection=document.forms["contact"]["type1"].value;
if(listSelection=="--Please Select--")
{
alert("You must select the reason to contact");
return false;
}
}
function validateStatus()
{
if ((contact.status[0].checked == false ) && (contact.status[1].checked == false ) && (contact.status[2].checked == false ) && (contact.status[4].checked == false))
{
alert("Please select your status");
return false;
}
}
function validateMessage()
{
var letters = /^[A-Za-z]+$/;
if (!letters.test(message.value))
{
alert("please write a message");
message.focus();
return false;
}
}
</script>
</head>
<body onload="focus()">
<div id = "banner">
<img src = "images/logo03.jpg" alt = "Uparty Logo"/>
</div>
<div id = "userAccount">
| HOME <img src = "images/home.png" alt ="event" style = "width:2%"/>
| CREATE EVENT! <img src = "images/event.png" alt ="event" style = "width:2%"/>
| CHANGE PASSWORD <img src = "images/changePassword.jpg" alt = "change password icon" style = "width:2%"/>
| CONTACT US <img src = "images/contact.png" alt ="contact" style = "width:2%"/>
| LOG OUT <img src = "images/Log-Out-icon.png" alt = "logout icon" style = "width:2%"/>
</div>
<div id = "banner">
<img src = "images/Get in Touch.JPG" alt = "contact us"/>
<form name="contact" method="post" action="" onsubmit="return javaScriptValidation()">
<h2>WE'D LOVE TO HEAR FROM YOU</h2>
<p>Your Name [required] <br />
<input type="textbox" name="name" id="name1" class="boxes" size="40"/></p>
Your Email [required]<br />
<input type="textbox" name="email" id="email" class="boxes" size="40"/><br />
<p>Type: <select id="type1" class="type">
<option value="--Please Select--" selected="selected">--Please Select--</option>
<option value="support">Support</option>
<option value="feedback">Feedback</option>
<option value="general">General</option>
</select></p>
<p>College Statues-->
<input type="radio" name="status" value="freshman"/>Freshman
<input type="radio" name="status" value="Sophomore"/>Sophomore
<input type="radio" name="status" value="Junior"/>Junior
<input type="radio" name="status" value="Senior"/>Senior</p>
<p>Subject [required]<br />
<input type="textbox" name="subject" class="boxes" size="40"/><p>
<img src = "images/send a message banner.JPG" alt = "contact picture"/> <br />
Message [required]<br />
<textarea name="message" id="message" rows="15" cols="40"></textarea><br />
<input type="submit" class="submit" value="submit"/>
<input type="reset" class="reset" value="reset"/>
</form>
<img src = "images/background.JPG" alt = "logout icon" style = "width:100%"/>
</div>
</body>
</html>
remove
if (validateSubject() == false)
{
return false;
}
You haven't defined a validateSubject() function
you dont have a function named validateSubject()
which is called here
if (validateSubject() == false)
{
return false;
}
function javaScriptValidation()
{
return validateName() && validateEmail() && validateSubject() && validateType() && validateStatus() && validateMessage();
}
Add ValidateSubject() implementaion and change:
function validateName()
{
var letters = /^[A-Za-z]+$/;
if (!letters.test(name1.value))
{
alert("Invalid Name (only letters)");
name1.focus();
return false;
}
return true; //add this line to each method
}
please replace with the following js
function javaScriptValidation(form) {
var namePattern = /^[A-Za-z]+$/;
var emailPattern = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
// name
if (!namePattern.test(form.name.value)){
alert("Invalid Name (only letters)");
form.name.focus();
return false;
}
//email
if (!emailPattern.test(form.email.value)){
alert("Invalid Email");
form.email.focus();
return false;
}
//type
if(form.type.selectedIndex == 0){
alert("You must select the reason to contact");
form.type.focus();
return false;
}
//status
if((form.status[0].checked == false) && (form.status[1].checked == false) && (form.status[2].checked == false) && (form.status[3].checked == false)){
alert("Please select your status");
return false;
}
//subject
if (!namePattern.test(form.subject.value)){
alert("please write a subject");
form.subject.focus();
return false;
}
//message
if (!namePattern.test(form.message.value)){
alert("please write a message");
form.message.focus();
return false;
}
return true;
}
add name for select box
<select id="type1" class="type" name="type">
add this on form tag onsubmit validation
<form name="contact" method="post" action="" onsubmit="return javaScriptValidation(this)">