Could anyone help me i have following issue with it when i put the wrong passwort it still gives no alert and opens the site.(the whole code isnt working and i dont know where the error is..) thank you for your help.
<!DOCTYPE html>
<html>
<head>
<title> passwort </title>
<script type="text/javascript">
function vergleiche(a, b) {
return (a == b) ? true : false;
}
function val(frm) {
if (vergleiche("passwort", frm.password.value){
alert("pw richtig");
}
else {
alert("pw falsch");
frm.password.select();
frm.password.focus;
}
if (frm.password.value == "") {
alert("enter password abla");
frm.password.focus();
return false;
}
if ((frm.password.value).length < 3) {
alert("dein pw sollte schon länger sein hö");
frm.password.focus();
return false;
}
if (frm.confirmpassword.value == "") {
alert("enter password");
return false;
}
if (frm.password.value != frm.confirmpassword.value) {
alert("passwoerter ungleich lan");
}
return true;
}
</script>
</head>
<body>
<h2> passwort validation</h2>
<form name="frm" method="POST" action="pw.php" onSubmit="">
Enter vorname:<input type="text" name="vorname"/>
Enter Password: <input type="password" name="password" placeholder="Enter Password"/><br/>
<br/>
Confirm Password: <input type="password" name="confirmpassword" placeholder="Re-enter Password"/>
<br/>
<input type="submit" value="Submit" onclick=""/>
<input type="reset" value="Reset"/>
</form>
</body>
</html>
As Rax Weber said, you are not even calling your function.
You should not pass your form this way.
I think it's better to do something like this
<input type="submit" value="Submit" onclick="val()" />
And in val function. (Because your form don't have an ID....)
frm = document.getElementsByName("frm")[0];
The line "if(vergleiche("passwort",frm.password.value) {" is incorrect, you are missing one ")"
if(vergleiche("passwort",frm.password.value)) {
Proceeding like this, your function should work. However, I would recommand that you translate your code in english so everyone can understand, and you should also use some IDE like Eclipse or at least Notepad++ to indent your code properly.
Using those tools will make you do less syntax errors.
Related
let me explain this better, i would like to know how it's possible to create a js code that checks if an html input is correct and in case it is it redirects you to another page, here is what i tried based on what i managed to find out.
html part:
<form name="access" onsubmit="return validate()">
<input
type="text"
id="inputbox"
value="Password"
pattern="idkwhatishoouldwriteinhere"
/>
<input type="submit" value="Submit" />
</form>
js part:
function validate() {
if (document.access.Password.value != "idkwhatishoouldwriteinhere") {
alert("Wrong password");
document.access.Password.focus();
return false;
} else {
window.open("index.html");
}
}
in case you are wondering why i put the "answer" in the patter is because this is supposed to be a little easter egg and i feel like looking directly at the js is meaningless becuase it contains the link you should be redirected to.
enter code here
You need to give your input the name Password, otherwise document.access.Password is undefined.
function validate() {
if (document.access.Password.value != "idkwhatishoouldwriteinhere") {
alert("Wrong password");
document.access.Password.focus();
return false;
} else {
window.open("index.html")
}
}
<form name="access" onsubmit="return validate()">
<input type="text" id="inputbox" value="Password" name="Password" />
<input type="submit" value="Submit" />
</form>
<!-- password is "idkwhatishoouldwriteinhere" -->
You want this.
You had some issues with the id of the field and name etc
I also changed your inline code to eventListener which is the recommended method
Password is fred
window.addEventListener("load", function() {
document.getElementById("access").addEventListener("submit", function(e) {
const inputbox = document.getElementById("inputbox");
if (inputbox.value != "fred") {
alert("Wrong password");
inputbox.focus();
e.preventDefault(); // cancel submit
} else location.replace("index.html")
});
})
<form id="access">
<input type="password" id="inputbox" value="" placeholder="Password" />
<input type="submit" value="Submit" />
</form>
If you want to keep your code close to what you already have, I would adjust it like this. I would suggest storing your class names and ids as variables and then accessing them from the variable. Also there is no need to return false in your if. There are other good solutions on here but this one will keep your code pretty close. This will also ensure that you don't end up with a null value when accessing the value in your password field.
const passwordField = document.getElementById('inputbox');
function validate() {
if(passwordField.value != "idkwhatishoouldwriteinhere") {
alert( "Wrong password" );
passwordField.focus() ;
}
else {
window.open("index.html")
}
}
<form name="access" onsubmit="validate()" href="javascript:void(0)">
<input type="text" id="inputbox" value="Password" />
<input type="submit" value="Submit" />
</form>
Basically, I have this very simple HTML form, when I submit, it does POST to /productos and runs a JS script that validates the form, if its not correct, it displays an error, all good.
But one thing I want to do is to "cancel" the POST if the form doesn't pass that validation, is there any way to do it?
I have thought about making the POST from the javascript function instead of from the form itself, but I have no idea how to do that
html:
<form name="registro" action="/productos" method='post' onsubmit="return validacion()">
<div>titulo</div>
<input type="text", name="titulo"/>
<input type="submit">
</form>
js validation:
function validacion(){
var titulo=document.registro.titulo.value;
if (titulo == ""){
alert("error, titulo cant be empty")
} else if (titulo.length > 100){
alert("error, titulo cant be more than 100 characters long")
}
make validacion() return true or false
function validacion(){
var titulo=document.registro.titulo.value;
if (titulo == ""){
alert("error, titulo cant be empty")
return false;
} else if (titulo.length > 100){
alert("error, titulo cant be more than 100 characters long")
return false;
}
return true;
}
<!DOCTYPE html>
<html>
<body>
<form name="registro" action="/productos" method="post">
<div>titulo</div>
<input type="text", name="titulo" required="required" />
<input type="submit">
</form>
</body>
</html>
no need for javascript run abounts are needed.
Its easier to use standard html5 with xhtml compatibility method, like this, for form validation:
<!DOCTYPE html>
<html>
<body>
<form name="registro" action="/productos" method="post">
<div>titulo</div>
<input type="text", name="titulo" required="required" />
<input type="submit">
</form>
</body>
</html>
In mi validation form I have two input fields in order to write email and confirm it.
Before the submit informations, two confirms are needed:
1-email must seems an email,
2-email one must match the email two.
I can handle these statements each one using two separate javascript functions but i fail when I try to check them all in the onsubmit event attribute. If I write a correct email adress, the form reach the action destination, even if the confirm email doesn't match.
Looking around the web doesn't help me.
Here u are the code (html/javascript):
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Email Validation</title>
<script type="text/javascript">
function isEmail(email, output) {
var regex = /^([a-zA-Z0-9_.+-])+\#(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
var email = document.getElementById(email).value;
if (regex.test(email)) {
return true;
} else {
document.getElementById(output).innerHTML = 'wrong email';
return false;
}
}
function compareEmail(email, emailToCompare, output){
var email = document.getElementById(email).value;
var emailToCompare = document.getElementById(emailToCompare).value;
if(emailToCompare == email){
document.getElementById(output).innerHTML = 'ok!';
return true;
}else{
document.getElementById(output).innerHTML = 'emails dont match!';
return false;
}
}
function check(){
return isEmail() && compareEmail();
}
</script>
</head>
<body>
<form action="file.php" method="post" onSubmit="return check()">
<p>Email</p>
<input type="text" name="email" maxlength="50" id="email">
<div id="email_result">
</div>
<br/>
<p>Confirm email</p>
<input type="text" onpaste="return false;" autocomplete="off" name="email" maxlength="50" id="confirm_email" onKeyUp="return compareEmail('email', 'confirm_email', 'confirm_email_result')">
<div id="confirm_email_result">
</div>
<input type="submit" name="submit" value="Register" onclick="return isEmail('email', 'email_result');">
</form>
</body>
The double control doesn't work with the follow script too:
function check(){
if (isEmail() && compareEmail()){
return true;
}else{
return false;
}
}
Nothing changes if I use:
onSubmit="return check()"
or
onSubmit="check()"
in the form event attribute.
You are missing the parameters in the function calls:
function check(){
return isEmail('email', 'email_result') && compareEmail('email', 'confirm_email', 'confirm_email_result');
}
Side note: You have declared variables in the functions with the same name as the parameters. It still works at it is, but the variables are not actually created but will overwrite the parameter values, so the code is a bit confusing.
I'm new here and I'm not an expert of coding, I'm still learning, so be patient please. :)
I created a simple form that is supposed to send an e-mail with a CV attachment. I found the code for this job and it works as intended (sends the mail with file correctly). I didn't use phpmailer or similar, it's just the simple php mail function.
I want a client side validation, javascript/jquery classic, and maybe a server side later. The point is that I can't prevent the form from being submitted to process the javascript validation. I guess it's because there is a file (I used the same form, without attachments, elsewhere and it works pretty well). I post the code so you can see what's wrong:
<form method="post" action="mail.php" id="uploadform" enctype="multipart/form-data">
<p>Name :</p>
<input name="name" id="name" type="text" />
<p>E-mail :</p>
<input name="email" id="email" type="text" />
<p>Tel :</p>
<input name="tel" id="tel" type="text" />
<p>Message :</p>
<textarea name="mex" id="mex" rows="7" cols="10"></textarea>
<p>File Upload :</p>
<input name="file" id="file" type="file">
<input type="submit" name="submit" id="submit" value="send" />
</form>
and this is the script:
<script type="text/javascript">
$(document).ready(function () {
$('#uploadform').submit(function (){
validateForm();
return false;
});
function validateForm(){
var name=document.forms["uploadform"]["name"].value;
if(name==null || name=="") {
$('#name').attr("placeholder","Who is writing?");
return false;
}
var email=document.forms["uploadform"]["email"].value;
var atpos=email.indexOf("#");
var dotpos=email.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length) {
$('#email').val("");
$('#email').attr("placeholder", "Insert a valid e-mail address!");
return false;
}
}
});
</script>
I still can't find why the script doesn't prevent the data from being submitted. It seems it ignores the javascript at all. I tried also with different methods, like onsubmit inline on the form tag, event.preventDefault(); and similar, but the behavior is the same. I'm getting crazy for this small issue. I'd be glad if someone could help/explain. Thanks!
You have wrapped your check inside the callback of the submit function.
You should do it like:
$(document).ready(function () {
$('#submit').click(function (event){
return validateForm();
});
function validateForm(){
var name=document.forms["uploadform"]["name"].value;
if(name==null || name=="") {
$('#name').attr("placeholder","Who is writing?");
return false;
}
var email=document.forms["uploadform"]["email"].value;
var atpos=email.indexOf("#");
var dotpos=email.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length) {
$('#email').val("");
$('#email').attr("placeholder", "Insert a valid e-mail address!");
return false;
}
return true;
}
});
Let me know if that works.
I can't understand why my javascript isn't working... Do i need to declare a variable somewhere?
<script type="text/javascript">
function validation(form) {
if(form.first_name.value == '' ) {
alert('Please enter your first name');
form.first_name.focus();
return false;
}
if(form.00N30000006S4uq.value == '') {
alert('Please enter the high end of your budget');
form.company.focus();
return false;
}
return true;
}
</script>
<form action="https://www.salesforce.com/servlet/servlet.WebToLead" method="POST" onsubmit="return validation(this);">
As mentioned by #ReturnTrue, the NAME must begin with a letter. That is why your script is failing.
In your case since the field is auto-generated, if you know the flow of the elements in the form then you can reference the form elements array, like this...
form.elements[2].value
where form.elements[2] is form.00N30000006S4uq. That will do the job.
Example:
function validation(form) {
if(form.elements[0].value == '' ) {
alert('Please enter your first name');
form.first_name.focus();
return false;
}
if(form.elements[2].value == '') {
alert('Please enter the high end of your budget');
form.company.focus();
return false;
}
return true;
}
<form action="" method="POST" onSubmit="return validation(this);">
<input type="text" name="first_name" />
<input type="text" name="company" />
<input type="text" name="00N30000006S4uq" />
<input type="submit" name="submit" />
</form>
Form names need to begin with a letter. "00N30000006S4uq" fails because it begins with a number.
See: http://www.w3.org/TR/html401/types.html#type-cdata