On validate revise html code using javascript - javascript

I use this code for validation:
<html>
<head>
<script>
function validateNew() {
var x1 = document.forms["register"]["firstname"].value;
if (x1 == null || x1 == "") {
alert("Please enter your first name.");
return false;
}
}
</script>
</head>
<body>
<form name="register" method="POST" onsubmit="return validateNew()">
<label id="fname_lbl" class="">First Name
<input type="text" name="firstname">
<input type="submit" value="Submit">
</form>
But I want to do something a little different. I had this code a while back, but I cant remember where I put it. Basically, instead of a pop up window, I want the validate to conditionally trigger code in the html, which will accomplish the goal of preventing the submission, but show, let's say, text above the field that says, in red, "Required Field".
The pseudo-code:
<html>
<head>
<script>
function validateNew() {
var x1 = document.forms["register"]["firstname"].value;
if (x1 == null || x1 == "") {
$trigger = for label id('fname_lbl') class=="require";
return false;
}
}
</script>
</head>
<body>
<form name="register" method="POST" onsubmit="return validateNew()">
<label id="fname_lbl" class="<? $trigger ?>">First Name
<input type="text" name="firstname">
<input type="submit" value="Submit">
</form>
Where the class named "require" will turn the font color of 'First Name' to red.
So on the validation, when the code finds out there is no first name, it then, using a trigger variable, modifies that variable, which is read inside the quotes of 'class'.
I know my pseudo-code is way off. I just remember being able to do something like that a couple years ago.
EDIT
I found that code snip
<head>
<script>
$(document).ready(function (){
$("#b_down").change(function() {
if ($(this).val() < 20 ) {
$("#pmi").show();
}else{
$("#pmi").hide();
}
});
});
</script>
</head>
<body>
<select name="b_down" id="b_down">
<option value=""></option>
<option value="1">1</option>
<option value="2" >2</option>
<option value="3" >3</option>
</select>
<? if ($row['b_down']<2) { ?>
<span id="pmi" style="display;" class="dropt">PMI:
<? } else { ?>
<span id="pmi" style="display:none;" class="dropt">PMI:
<? } ?>
Basically, on the change event, it either shows or hides a particular input. Not sure how to apply it to my project.

You could use this:
<html>
<head>
<title>LIGHTBOX EXAMPLE</title>
<style>
.normal {
color: #0f0;
}
.required {
color: #f00;
}
</style>
</head>
<body>
<form name="register" method="POST" onsubmit="return validateNew();">
<label id="fname_lbl" class="normal">First Name</label>
<input type="text" name="firstname">
<input type="submit" value="Submit">
</form>
</body>
<script>
function validateNew() {
var x1 = document.forms["register"]["firstname"].value;
if (x1 == null || x1 == "") {
document.getElementById("fname_lbl").className = "required";
return false;
}
}
</script>

Related

HTML Form Submit button doesn't work, only reloads page

I wanted to make a settings page for a Chrome Extension, but the save button doesn't work. The .click() doesn't even activate at all. I put all of my code beneath. Also, do I use the commented out button instead(see below)?
HTML
<!DOCTYPE html>
<html>
<head>
<title>Y.A.Y | Options</title>
<script type="text/javascript" src="/js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="/js/caps.js"></script>
</head>
<body>
<h1>Settings</h1>
<form>
<label>Enabled: </label>
<select id="on">
<option value="on">Yes</option>
<option value="off">No</option>
</select>
</br>
<label>First Letter:</label>
<select id="first">
<option value="on">Capital</option>
<option value="off">Lowercase</option>
</select>
</br>
<label>Change First Letter of Each </label>
<select id="per">
<option value="on">Word</option>
<option value="off">Sentence</option>
</select>
<!--<input id="save" type = "submit" value = "Save"/>!-->
<button id="yayay" type="submit">Save</button>
</form>
</body>
</html>
Javascript
var pretty_fied = false;
var isOn;
var isCapFirst;
var firstLetterPerWord;
getData()
function getData() {
chrome.storage.local.get(function (data) {
isOn = data.isOn;
isCapFirst = data.isCapFirst;
firstLetterPerWord = data.firstLetterPerWord;
})
}
$('form').on('submit', function () {
alert("HI!");
isOn = ($("#on").value == "on");
isCapFirst = ($("#first").value == "on");
firstLetterPerWord = ($("#per").value == "on");
console.log(isOn);
chrome.storage.local.set({
isOn: isOn,
isCapFirst: isCapFirst,
firstLetterPerWord: firstLetterPerWord
});
console.log("Saved");
});
In the form field you should specify the action, in other words what you are doing with the form
Eg.
<form action ='test.php' method="post"></form>
Which will send the form to a file called test.php
In the case though you will want to use jquery submit.
This is an example using the submit function in jquery:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("form").submit(function(){
alert("Submitted");
});
});
</script>
</head>
<body>
<form action="">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
source: http://www.w3schools.com/jquery/event_submit.asp
notice that the action part is left blank, because you do not wish to send a request to another document.

Javascript validations

form validation
<html>
<head>
<link rel="stylesheet" type ="text/css" href ="home.css">
<script src ="contact.js"></script>
<title>Barber</title>
</head>
<body>
<script src ="contact.js"></script>
<ul>
<li><a class="active" href="barber.html">Home</a></li>
<li> Gallery</li>
<li>Appointment (php) </li>
<li>About</li>
<li> Contact Us (javascript)</li>
<li>Log In(php, java, sql) </li>
</ul>
<li2>
<h2>Contact Us:</h2>
</li2>
<div>
<form name= "form" method "post" onsubmit="return validateForm()" >
Name: <input type="text" id= "name" name= "name"/>
<br>
<label for="email">Email:</label>
<input type="text" name="email" id="email" placeholder="JohnDoe#example.com" />
<br>
<label for="website">Phone Number:</label>
<input type="text" name="Phone" id="Phone" placeholder="###-###-####" />
<br>
<label for="message">Message:</label>
<textarea name="message" id='message' cols="40" rows="6">
</textarea>
<br>
<input type ="submit" name="submit" value = "submit" >
</form>
</div>
</body>
</html>
external javascript
<script type = "text/javascript">
function validateForm(){
if (document.form.name.value=="") {
alert("Empty");
}
return;
}
</script>
So I'm trying to validate all of my fields using JavaScript, I am unable to get it to work at all and I've been doing this all day. I had started out with more script than this but it didn't work. So I got rid of it. I think if I can figure out how to validate one field, I should be able to figure out the rest. Can anyone help me out with this?
Also where to I put the external link for my script?
In you contact.js, just include the js functionality, no need to have the <script> tag
Your contact.js should look something like:
contact.js
function validateForm(){
if (document.form.name.value=="") {
alert("Empty");
}
return;
}
You should try with this;
Give one common class to all like class="required".
And then write your javascript like below,
<script type = "text/javascript">
function validateForm(){
if ($(".required").val() == "")
{
alert("Empty");
return false;
}
return;
}
</script>
You should use
return false;
like this.
if (document.form.name.value=="")
{
alert("Empty");
return false;
}
function validateForm() {
var x = document.forms["form"]["value"].value;
if (x == null || x == "") {
alert("Empty");
return false;
}
}
Try this for single field check.
var dataValue = document.getElementById("name").value;
if (dataValue == "") {
alert("Empty");
return false;
}

Javascript form validation not empty or no whitespaces

I'm trying to validate a form I'm creating and can't seem to understand how this works. I'm trying to make sure the field isn't empty or contains no white-spaces I have validated it server side but not client side.
Could someone please show me the code like below to validate against being empty or having no white-spaces?
I see these below and this is what I thought they did:
x===null // means if field is empty
x==="" // on trying this means if the field is empty
x===" " // and this checks if there is 1 white space
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x===null || x===""|| x===" ") {
alert("First name must be filled out");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
You can do this using javascript trim() function.
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x.trim()==null || x.trim()==""|| x===" ") {
alert("First name must be filled out");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>

js validation of not null field

I have done a login page. I want my js validateForm()function to alert a user if they have left out the username or password. This is the code I have got at the moment.
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm()
{
var x=document.forms["myForm"]["username"].value;
if (x==null || x=="")
{
alert("Please enter username");
return false;
}
}
</script>
</head>
<div class="users form">
<br>
<form name="myform" action="Employees/login" onsubmit="return validateForm()" method="post" >
<?php
if (isset($error)) {
echo "<p style='color:red;font-size: 20px''>Username or Password is invalid. Please try again.</p>";
}?>
<p>Enter Username:
<input type="text" name="username" placeholder="username" style="height: 25px;width: 160px;"/></p>
<br><br>
<p>Enter Password:
<input type="password" name="password" placeholder="password" style="height: 25px;width: 160px;"/></p>
<br>
<input type="submit" style="height:35px;width:100px;font-size: 18px; align:center;" value="Sign in">
</form>
</div>
At the moment it is not working, and I think the problem is with the code line "var x=document.forms["myForm"]["username"].value;" Can someone please help?
The issue is forms["myForm"], you used an uppercase F, when actually your form name is all lowercase so it should be:
var x=document.forms["myform"]["username"].value;
// ^ lowercase
Not part of the problem, but you might prefer to use unobtrusive JavaScript to set the onsubmit handler instead of in the HTML attribute:
window.onload = function(){
document.forms["myform"].onsubmit = validateForm;
};
Now, in validateForm you can use this instead of finding the form manually.
function validateForm()
{
var x = this["username"].value;
...
}

checking a form before submitting - JavaScript

I have the following form:
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Choose</title>
<script type="javascript/text">
function ischecked(){
var check = document.getElementsByTagName( 'input' );
for( var i = 0; i < check.length; i++ ){
if( check[ i ].type == 'radio' && check[ i ].checked ){
return true;
}
}
return false;
}
</script>
</head>
<body>
<form method="post" enctype="application/x-www-form-urlencoded" onsubmit="ischecked();">
<h1>Choose</h1>
<p><input type="radio" name="choose" value="psychology"><font size="5" color="#0033CC">Instant Psychology</font><br>
<br>
<input type="radio" name="choose" value="geography"><font size="5" color="#CC0000">Instant Geography</font><br>
<br>
<input type="radio" name="choose" value="gastronomy"><font size="5" color="#660033">Instant Gastronomy</font><br>
<br>
<input type="submit" name="Submit" value="Go"></p>
</form>
</body><link rel="stylesheet" type="text/css" href="data:text/css,"></html>
I wanted to make sure one of the radio buttons have been checked before submitting the form. However, it does not work, and the form is submitted anyways. What am I doing wrong here?
You need to return the result of your function from the inline event handler.
You have to check against the value returned in your validation function directly in the attribute value. That is, in your HTML form declaration
<form method="post" enctype="application/x-www-form-urlencoded" onsubmit="ischecked();">
you should write:
onsubmit="return ischecked();"
instead of:
onsubmit="ischecked();"

Categories