Develop Reference

How do i make a js code that redirects to a certain html page with a certain input?

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>

Simple mail send with attachment, sends despite validation

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.

How to add Text box validation in webpage?

Hi I have two text boxes. One is for username and other one is for password. Currently I have code for displaying a error message saying "Invalid credentials" if any of the fields are left blank. This takes me to the new page displays the error message and takes me back to the home page where I can enter my username and password again.
I want the validation part to be done near the text box itself. For example if Username textbox is left blank and submit button is clicked, it should display a message like Please enter the username near the textbox itself.
HTML code:
<form method="post" action="login.php">
<p class="user_text">USER LOGIN</p>
<p class="user_name_text">username<span style="color:#f60219;"> *</span></p>
<p style="padding:8px 0 0 5px;">
<input type="text" name="username" minlength="2" maxlength="20" class="contact_filed" value="enter your name" onfocus="javascript:clearField(this,'enter your name')" onblur="javacript:fillField(this,'enter your name')" /></label>
</p>
<p class="user_name_text1">password<span style="color:#f60219;"> *</span></p>
<p style="padding:8px 0 0 5px;">
<input type="password" name="password" maxlength="20" class="contact_filed" value="password" onfocus="javascript:clearField(this,'password')" onblur="javacript:fillField(this,'password')" />
</p>
<p style="padding:16px 0 0 16px;"><input name="submit" type="submit" value="Submit" class="log" /></p>
<p style="padding:12px 0 0 16px;">Create new accountRequest new password</p>
</form>
PHP code for validation:
if ($_POST['submit']) {
include('connect.php');
$u = mysql_real_escape_string($_POST['username']);
$p = md5($_POST['password']);
$q = mysql_query("SELECT id FROM $login_db_table WHERE username='$u' AND password='$p' LIMIT 1");
if (mysql_fetch_array($q, MYSQL_ASSOC)) {
if ($_POST['remember']) {
setcookie('username', $_POST['username'], time() + 5000000);
setcookie('password', md5($_POST['password']), time() + 5000000);
} else {
setcookie('username', $_POST['username']);
setcookie('password', md5($_POST['password']));
}
if($u != "" && $p !=""){
echo '<p>Login successful.</p>';
header("Location: main.php");
}
}
else
echo "Login failed. Please enter valid credentials.";
echo "<script>setTimeout(\"location.href = 'http://localhost/CashTree/reg/Home/index.html';\",1500);</script>";
//echo '<p>Login failed. Please enter your correct credentials</p>';
}

You can add an html element near the element say
<p style="padding:8px 0 0 5px;">
<input id="uname" type="text" name="username" minlength="2" maxlength="20" class="contact_filed" value="enter your name" onfocus="javascript:clearField(this,'enter your name')" onblur="javacript:fillField(this,'enter your name')" />
<div id="user_name_invalid"></div>
</p>
Then
using jQuery
<script type='text-javascript'>
$("#form").submit(function(e){
var uname = $("#username").val();
if(uname == ""){
$("#user_name_invalid").html("Username is invalid");
return false;
}
}
</script>
the return false; to stop the submitting.

For checking if the username is empty just do this:
if($_POST['username']=''){
echo 'Please enter the username';
}
If you want this near your textbox, just put it in place where the text will be showing as close to the textbox, so at the beginning of submitting the button. If you want that when this error is showing he shouldn't actually login. You could use a boolean like so:
$check=true;
if ($_POST['submit']) {
if($_POST['username']=''){
echo 'Please enter the username';
$check=false;
}
if($check){
//everything you want to do if it's succesfull
}
}
This will make sure when the $check=false it wont go to the next page but stay on the current page, displaying the error message.

You can use javascript or jquery for this.
I will illustrate with javascript for your easy understanding.
On your form, change the first line to
<form method="post" action="login.php" onsubmit="return check_error();">
and add a javascript section
<script>
function check_error(){
if(document.getElementById('username_id').value == ""){
alert("Enter The Username");
return false;
}
}
</script>
You will need to add the "ID" for each textbox you would like to be verified.
Try this---
<script language="javascript">
function check_error(){
if(document.getElementById('username').value == ""){
alert('Please Enter Username');
return false;
}
}
</script>
<form method="post" onSubmit="check_error();">
<input type="text" name="username" id="username" />
<input type="submit" value="Submit" />
</form>
It is a very simple demonstration. but you can certainly build on it.

You can also use HTML 5 new feature of reququired attribute on input tags. LIKE an example of :
<input type='text' name='txt_username' required='true' />
<input type='password' name='txt_password' required='true'/>
To use that above feature, you should need to declare before elements.
You can also set custom error meesage using "oninvalid" event and setCustomValidity("") function. A example :
<input type='text' name='txt_photo_title' value='' required='true' placeholder="photo name" oninvalid="setCustomValidity('Please Enter Photo Name !');" />
And some sample login form is shown as below. Due to HTML 5 new features, sdata don't reach to sever actually, it excutes in user's browser and so after click submit button, it show error msg instantly. And its design can be maintained by CSS with new css selectors too. Thanks and try it as below sample.
<!DOCTYPE HTMl>
<html>
<head>
<title> Test Form</title>
</head>
<body>
<h1> Test Validation Form</h1>
<hr>
<form name='frm_test' method='post' action='login.php' >
<label> Username :</label>
<input type='text' name='txt_username' required='true' oninvalid="setCustomValidity('Please enter username !');"/>
<br/>
<label> Password :</label>
<input type='password' name='' required='true' oninvalid="setCustomValidity('Please Enter passwords !');"/>
<input type='submit' name='btn_submit' value='Login'>
</form>
</body>
</html>

My javascript form validation works perfectly in Chrome but not in Firefox

The javascript:
function validateForm()
{
var x=document.forms["newsletter"]["agree"].value;
if (newsletter.agree.checked != 1)
{
alert("Checkbox must be checked");
return false;
}
var y=document.forms["newsletter"]["email"].value;
var atpos=y.indexOf("#");
var dotpos=y.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=y.length)
{
alert("Not a valid e-mail address");
return false;
}
else
{
return true;
}
}
And my HTML
<div id="signup">
<form id="newsletter" action="" method="get" onsubmit="return validateForm()">
<fieldset>
<p>Email: <input type="text" name="email" size="35"/>
Please send me the monthly newsletter
<input type="checkbox" checked="checked" name="agree" value=""/>
<br/>
<input type="submit" value="Signup"/></p>
</fieldset>
</form>
</div><!-- signup -->
When I click submit with invalid entries in Chrome, the alert messages show and the form doesn't submit. However, when I do the same in Firefox, the form submits without an alert message.
I've been working on this for 5 hours, I truly have no idea. Thanks for any help, it's greatly appreciated.

I think it might help you.
<div id="signup">
<form id="newsletter" action="" method="get" onsubmit="return validateForm()">
<fieldset>
<p>Email: <input type="text" name="email" id="email" size="35"/>
Please send me the monthly newsletter
<input type="checkbox" checked="checked" name="agree" id="agree" value=""/>
<br/>
<input type="submit" value="Signup"/></p>
</fieldset>
</form>
</div><!-- signup -->
function validateForm()
{
var agreeEl = document.getElementById("agree");
if (agreeEl.checked != 1)
{
alert("Checkbox must be checked");
return false;
}
var emailEl = document.getElementById("email");
var atpos = emailEl.value.indexOf("#");
var dotpos = emailEl.value.lastIndexOf(".");
if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= y.length) {
alert("Not a valid e-mail address");
return false;
}
return true;
}

First, is there some reason you are using 'get' instead of 'post' to submit your form? Chrome complains to me when I tried to submit your form using 'get'.
I setup a simple fiddle to test your form at http://jsfiddle.net/jsWyw/. Everything works fine if I use JQuery to handle the form submit instead of your 'onSubmit'. So I looked into what was going on with onSubmit and came across this thread: http://productforums.google.com/forum/#!topic/chrome/Z3MD5Od3oQM.
Things to try:
Make sure to use post instead of get
Use 'onSubmit' instead of 'onsubmit'
Make sure your script is included using <script type="text/javascript" src="javascript.js"></script>
If that fails, I would suggest handling the submit event yourself in Javascript instead of using onSubmit which seems to be a bit flaky in Chrome.

Did you look at your error console? Your validateForm handler is assuming that window.newsletter is a form element (instead of using document.forms["newsletter"] in that first if()), which it's not in Firefox in standards mode. So that line throws, and if an onsubmit handler throws the form will just go ahead and submit. But of course the error console is reporting that the handler threw.....

function validateForm()
{
var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("#");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Not a valid e-mail address");
return false;
}
}
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form>

Javascript form validation not working

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