I'm trying to make a Tumblr blog page with multiple languages selection, that will load markup from a file and replace the tagged elements, like this:
<p id="line1">Text in English</p>
user presses "RU" button, browser loads the html file with using AJAX, replaces p id="line1" with the one from the file, browser shows paragraph in second language
I really cannot find any normal solution, since I don't know JavaScript (yes), but I know this is really easy, I really want the AJAX way, since it will be easier for me to translate.
My current code:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="utf-8">
<meta name="author" content="yvemiro">
<meta name="description" content="yve miro funny jokes satire internet memes est. 2015">
<link rel="stylesheet" href="http://static.tumblr.com/zicio7x/pI5nxaau9/font.css" type="text/css">
<link rel="stylesheet" href="font.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$("#rusbutton").click(function () {
var language = 'russian';
$.ajax({
url: 'https://psv4.vk.me/c610917/u284972650/docs/267ee3075ebc/langs.xml'
success: function(xml) {
$(xml).find('translation').each(function(){
var id = $(this).attr('id');
var text = $(this).find(language).text();
$("." + id).html(text);
});
}
});
});
</script>
<style>
body { color: #0a1713; font-family: 'Clear Sans', Verdana, sans-serif; margin: 0; background-color: #fdfffd; }
em { font-style: italic; }
strong { font-weight: bold; }
h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-weight: normal; }
#navbar {
width: 100%;
line-height: 45px;
margin: 0;
color: rgb(139, 141, 150);
font-size: 15px;
}
#navbarul {
list-style-type: none;
padding: 0;
margin: 0;
margin-left: 16px;
display: inline-block;
}
#navbarul li {
display: inline;
margin-right: 13px;
}
#navbarul li a {
text-decoration: none;
color: inherit;
}
#navbar ul a:hover {
color: rgb(120, 121, 130);
}
#cont {
padding: 0;
text-align: center;
min-width: 400px;
max-width: 700px;
margin: 20px auto;
padding: 0;
}
#yvelogo {
height: 19px;
width: 15px;
vertical-align: -4px;
}
a #yvelogo {
border: 0;
}
#lang {
float: right;
list-style-type: none;
padding: 0;
margin: 12px 16px 0 0;
line-height: initial;
}
#lang li {
margin-bottom: 12px;
}
.reblicon {
height: 17px;
width: 16px;
display: inline-block;
vertical-align: middle;
}
#pagination {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
color: gray;
}
#pagination li {
display: inline-block;
margin-right: 10px;
}
#status {
font-style: italic;
color: gray;
background-color: #eeeeee;
padding: 4px 8px;
border-radius: 5px;
}
#line {
margin-right: 15px;
}
#mainlinks {
list-style-type: none;
padding: 0;
margin: 0;
}
#mainlinks li {
display: inline;
padding: 0;
margin: 0 20px;
}
</style>
</head>
<body>
<nav>
<div id="navbar">
<ul id="navbarul">
<li><img id="yvelogo" alt="yve miro" src="http://static.tumblr.com/zicio7x/Btdnxoyc0/home.png"></li>
</ul>
<ul id="lang"><li><strong>EN</strong></li><li><button id="rusbutton">RU</button></li><li>LT</li><li>FR</li></ul>
</div>
</nav>
<div id="cont">
<img src="http://static.tumblr.com/zicio7x/L8Pnxoyp5/vuvuzela.jpg"><br><br>
<img id="line" height="27px" width="40px" src="http://static.tumblr.com/zicio7x/xo2nxoye9/line.png" /><span id="status">„Fenmisimn is good”</span>
<br><br>
<h2 id="title1">SHUT YOUR MOUTH YVE'S SPEAKIN'</h2>
<p id="line1">welcome to my funny satirical™ page</p><br>
<ul id="mainlinks">
<li>Blog</li>
<li>Stuff</li>
<li>Me</li>
<li>Ask</li>
<li>Archive</li><br><br>
<li>Twitter</li>
<li>YouTube</li>
</ul>
</div>
</body>
</html>
And replacing images, too
This line is looking for classes, not ID's not the . at the start of the selector
$("." + id).html(text);
Change it to
$("#" + id).html(text);
Related
I have an app To Do List. Using button you add task and new task adds to the list of items with checkbox and delete button in front of each one. I want to save all value and marked info on page (store it) once page renewed using browser. When I`m using mounted and watch.There are 2 issues: 1)When I use CodePen or GitHub to view the site and app it shows nothing and in console.log:"Unhandled error during execution of mounted hook"; 2)In Visual Studio Code it shows everything on preview, but stores only value of input-not marked chekboxes. Please help to solve it. Below my code:
Vue.createApp({
data(){
return{
placeholder: 'Start typing',
inputvalue: '',
notes: [],
checked: []
}
},
mounted() {
this.notes = JSON.parse(localStorage.getItem('note')) || [];
},
watch: {
notes: {
handler: function() {
localStorage.setItem('note', JSON.stringify(this.notes));
},
deep: true
}
},
methods: {
addnewtask(){
if (this.inputvalue !== ''){
this.notes.push(this.inputvalue)
this.inputvalue=''
}
},
removetask(index){
if (confirm('Do you really want to delete?'))
this.notes.splice(index, 1)
}
}
}).mount(app)
body {
font-family: sans-serif;
font-size: 14px;
color: #030303;
background: #3d5f82;
}
h1 {
font-weight: 500;
text-transform: uppercase;
text-align: center;
font-style: solid;
}
.btn {
color: #31d78c;
place-content: center;
place-items: center;
width: fit-content;
border-radius: 99px;
border: 1px solid #31d78c;
text-decoration: none;
text-transform: uppercase;
margin-right: 10px;
margin-top: 10px;
padding: 10px;
font-weight: 700;
background: #fff;
}
.btn:hover {
cursor: pointer;
background-color:rgb(231, 239, 235);
}
.btn.danger {
color: #eb3c15;
place-content: center;
place-items: center;
width: fit-content;
border-radius: 99px;
border: 1px solid #eb3c15;
text-decoration: none;
text-transform: uppercase;
margin-right: 10px;
margin-top: 10px;
padding: 10px;
font-weight: 700;
background: #fff;
}
.btn.danger:hover {
cursor: pointer;
background-color:rgb(236, 219, 219);
}
.container {
margin: 0 auto;
max-width: 1000px;
}
.form-control {
position: relative;
margin-bottom: 10px;
}
.form-control input,
.form-control select {
margin: 0;
outline: none;
border: 2px solid #ccc;
display: block;
width: 95%;
color: #2c3e50;
padding: 0.5rem 1.5rem;
border-radius: 3px;
font-size: 1rem;
}
.card {
overflow: hidden;
padding: 1rem;
margin-bottom: 1rem;
border-radius: 10px;
box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.2);
background: #fff;
}
.card.center {
display: flex;
flex-direction: column;
align-items: center;
}
.list {
margin: 0;
padding: 0;
list-style: none;
}
.list-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 0;
transition: .22s all;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To Do List</title>
</head>
<link rel="stylesheet" href="style.css">
<style>
[v-cloak] {
display:none;
}
</style>
<body>
<div class="container" id="app" v-cloak>
<div class="card">
<h1>To Do List</h1>
<div class="form-control">
<input
type="text"
v-bind:placeholder="placeholder"
v-model="inputvalue"
v-on:keypress.enter="addnewtask"
/>
<button class="btn" v-on:click="addnewtask">Add Task</button>
</div>
<hr />
<ul class="list" v-if="notes.length !== 0"...>
<li class="list-item" v-for="(note, index) in notes" v-bind:key="note">
<div>
<input type="checkbox" v-model="checked[note]"/>
<span :style="checked[note] ? 'text-decoration: line-through' : ''">
{{index+1}}) {{note}}
</span>
</div>
<button class="btn danger" v-on:click="removetask(index)">Delete</button>
</li>
<hr />
<li>
<strong>Total: {{notes.length}}</strong>
</li>
</ul>
<div v-else>No task exist, please add first one.</div>
</div>
</div>
<script src="https://unpkg.com/vue#next"></script>
<script src="Vue3.js"></script>
</body>
</html>
Try adding JSON.parse in a try-catch block
mounted() {
try {
this.notes = JSON.parse(localStorage.getItem('note'))
} catch(e) {
this.notes = []
}
}
I made this "Get Started" button. I want to put it below the title "All memories in one film". I tried aligning it, but it won't work.
* {
margin: 0;
padding: 0;
}
body{
height: 100vh;
width: 50vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(58, 58, 58, 0.75)), url(4kcamera.jpg);
background-size: cover;
background-position: center;
}
nav{
width: 100%;
height: 80px;
position: fixed;
}
.logo{
float: left;
padding: 0 30px;
margin-left: 55px;
margin-right: 30px;
width: 50px;
margin-top: 20px;
}
ul li{
list-style: none;
display: inline-block;
line-height: 90px;
padding: 0 31px;
}
ul{
margin-left: 840px;
}
ul li a{
text-decoration: none;
font-size: 20px;
font-family: 'Roboto Condensed', sans-serif;
color: rgb(250, 250, 250);
}
ul li a:hover {
color: rgb(102, 151, 241);
transition-duration: 0.5s;
}
#text{
transform: uppercase;
color: white;
font-family: 'Poppins', sans-serif;
text-align: center;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 60px;
}
#button1{
background-color: rgb(30, 109, 255);
border: none;
border-radius: 15px 50px;
color: white;
padding: 35px;
margin: 22px;
text-align: center;
font-size: 13px;
font-family: 'Poppins', Helvetica;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PRODUX NA</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel = "stylesheet" type = "text/css" href = "reset.css"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght#300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght#600&family=Roboto+Condensed:wght#300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#1,300&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<a href="index.html">
<img class="logo" src="1 NA.png" width="50" height="50">
</a>
<ul>
<li>
Home
</li>
<li>
About Me
</li>
<li>
Contacts
</li>
<li>
Portfolio
</li>
</ul>
</nav>
<div id="text">
</div>
<script type = "text/javascript">
var i = 0,text;
text = "All your favorite memories in one film."
function typing(){
if(i < text.length){
document.getElementById("text").innerHTML += text.charAt(i);
i++
setTimeout(typing, 50);
}
}
typing();
</script>
<div class="container">
<button id="button1">Get Started</button>
</div>
</body>
</html>
The button is below the javascript function. The id is "button1" and the container's id is just "container". As you can see in the CSS file, I used the text-align command.
In addition, I also tried justifying the content to the center and aligning all the items to the center below the title (uses Javascript function). Help would be appreciated.
I am doing my best to keep the changes true to your project without restructuring your html. Depending on how you are using this, there are better ways to structure your html.
The first thing I did was create a container for the text and button to be nested inside. Then I moved both your text div, and your container div with the button inside this other container. Then, I moved many of your absolute positioning to the #textAndButtonContainer from your #text styling. Then, I used display: flex to allow flexbox styling / centering as I find it is the easiest way to center things.
Hopefully this helps!
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
width: 50vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(58, 58, 58, 0.75)), url(4kcamera.jpg);
background-size: cover;
background-position: center;
}
nav {
width: 100%;
height: 80px;
position: fixed;
}
.logo{
float: left;
padding: 0 30px;
margin-left: 55px;
margin-right: 30px;
width: 50px;
margin-top: 20px;
}
ul li{
list-style: none;
display: inline-block;
line-height: 90px;
padding: 0 31px;
}
ul{
margin-left: 840px;
}
ul li a{
text-decoration: none;
font-size: 20px;
font-family: 'Roboto Condensed', sans-serif;
color: rgb(250, 250, 250);
}
ul li a:hover {
color: rgb(102, 151, 241);
transition-duration: 0.5s;
}
#text{
transform: uppercase;
color: white;
font-family: 'Poppins', sans-serif;
text-align: center;
margin: 0;
font-size: 60px;
}
#textAndButtonContainer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
justify-content: center;
border: 1px solid red;
}
.container {
display: flex;
justify-content: center;
}
#button1{
background-color: rgb(30, 109, 255);
border: none;
border-radius: 15px 50px;
color: white;
padding: 35px;
margin: 22px;
text-align: center;
font-size: 13px;
font-family: 'Poppins', Helvetica;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PRODUX NA</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel = "stylesheet" type = "text/css" href = "reset.css"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght#300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght#600&family=Roboto+Condensed:wght#300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#1,300&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<a href="index.html">
<img class="logo" src="1 NA.png" width="50" height="50">
</a>
<ul>
<li>
Home
</li>
<li>
About Me
</li>
<li>
Contacts
</li>
<li>
Portfolio
</li>
</ul>
</nav>
<div id="textAndButtonContainer">
<div id="text">
</div>
<div class="container">
<button id="button1">Get Started</button>
</div>
</div>
<script type = "text/javascript">
var i = 0,text;
text = "All your favorite memories in one film."
function typing(){
if(i < text.length){
document.getElementById("text").innerHTML += text.charAt(i);
i++
setTimeout(typing, 50);
}
}
typing();
</script>
</body>
</html>
The main issue is the text which has the position absolute. To position the button below the text, the container which is holding the button must also be positioned absolute. This will in turn align the button as well.
Add this to the style:
.container {
position: absolute;
bottom: -25px;/*give enough space to the text above*/
left: 50%;/*to horizontally center it*/
transform: translateX(-50%);/*to horizontally center it*/
}
This positions the button at the bottom of the text.
Try changing the button's parent div to have a class of text-center, and add a .text-center to your CSS.
So you would have HTML:
<div class="text-center">
<button id="button1">Get Started</button>
</div>
And for your CSS:
.text-center {
text-align: center;
}
Whenever I click on the hamburger icon the menu opens but when I click on it again it is supposed to get closed... But it's not. I am trying to debug but I have no idea what is going wrong. If anyone knows, please help
// Hamberger menu
const navSearch = document.querySelector('.nav-search');
const navLeft = document.querySelector('.nav-left');
document.querySelector('.toggle').addEventListener('click', () => {
console.log(navSearch.style.display);
console.log('1');
if(navSearch.style.display = "none") {
console.log('2');
navSearch.style.display = "inline-block";
navLeft.style.display = "inline-block";
console.log(navSearch.style.display);
} else if(navSearch.style.display = "inline-block") {
console.log('3');
navSearch.style.display = "none";
navLeft.style.display = "none";
}
console.log('......');
});
// Variables
$website-width: 1280px;
$color-main: #4bbf73;
$color-dark: #343a40;
$color-light: #fff;
$color-lightx2: #f7f7f9;
//General Styles
* {
margin: 0;
padding: 0;
}
body {
background-color: $color-light;
font-family: "Nunito", Arial, Helvetica, sans-serif;
line-height: 1.6;
}
a {
text-decoration: none;
color: $color-light;
}
ul {
list-style: none;
}
h2,
h3,
h4 {
text-transform: uppercase;
}
img {
width: 100%;
}
input {
border: none;
padding: 0.7rem 1rem;
background: $color-lightx2;
&:focus {
outline: none;
}
}
// Utilities
.container {
max-width: $website-width;
padding: 0 1.5rem;
margin: auto;
overflow: hidden;
}
// navbar
header {
background: $color-dark;
height: 100px;
#navbar {
padding-top: 1.3rem;
color: $color-light;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
.nav-logo {
font-size: 1.5rem;
font-weight: 900;
letter-spacing: 2px;
padding: 0.5rem 1rem;
}
ul {
display: flex;
justify-content: center;
li {
padding-left: 1.5rem;
}
}
input[type="submit"] {
margin-left: 0.4rem;
background-color: inherit;
border: $color-main 2px solid;
color: $color-main;
&:hover {
background-color: $color-main;
color: $color-light;
transition: all 0.2s ease-in-out;
}
}
input[type="text"] {
padding: 0.7rem 1rem;
}
}
.toggle {
position: absolute;
top: 2.2rem;
right: 6rem;
transform: scale(2);
display: none;
}
}
#import 'media';
#media (max-width: 850px) {
header {
height: auto;
#navbar {
flex-direction: column;
align-items: start;
input[type="text"] {
margin: 1rem 0 1.4rem 3rem;
}
ul {
padding-bottom: 1rem;
}
}
.toggle {
display: inline-block;
}
.nav-search,
.nav-left {
display: none;
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.0/css/all.css"
integrity="sha384-OLYO0LymqQ+uHXELyx93kblK5YIS3B2ZfLGBmsJaUyor7CpMTBsahDHByqSuWW+q" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="scss/style.css">
<title>AllMart</title>
</head>
<body>
<header>
<div class="container">
<nav id="navbar">
<div class="nav-logo">
AllMart
</div>
<div class="nav-search">
<form>
<input type="text" placeholder="Search Product...">
<input type="submit" value="SEARCH">
</form>
</div>
<div class="nav-left">
<ul>
<li id="cart"><i class="fas fa-shopping-cart"></i> CART</li>
<li id="profile"><i class="fas fa-user"></i> SIGN IN</li>
</ul>
</div>
</nav>
<span class="toggle"><i class="fas fa-bars"></i></span>
</div>
</header>
<script src="js/index.js"></script>
</body>
</html>
and this is the output I get whenever I click on the icon
I have no idea what is going wrong if anyone knows, please help
You need to use === or == in if statements, not =, which is the assignment operator. === is preferred because it tests for strict equality (no type conversion).
if(navSearch.style.display === "none")
else if(navSearch.style.display === "inline-block") {
jsp and a loginValidate.js i have provided a link to js in jsp. But the login form is not getting validates. I have a span id which should display an error message but its not happening.
my login.jsp is:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Header</title>
<script type="text/javascript" src="js/LoginValidate.js"></script>
<link href="CSS/Header.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="top">
<div class="wrapper col1">
<div id="header">
<div id="logo">
<h1>
<U>SK Business Group, Inc.</U>
</h1>
<p>
<strong>Helping GROW your business</strong>
</p>
</div>
<div class="wrapper col6">
<div id="head">
<div id="login">
<h2>Login !</h2>
<B>Already have an account.LOGIN here</B>
<form name="login" action="LoginValidateServlet" method="post"
onSubmit="return loginValidate()">
<input type="hidden" name="pagename" value="login" />
<fieldset>
<legend>Client Login</legend>
<div class="fl_left">
<input type="text" name="txtUsername" id="uname" value="Enter Username…" onfocus="this.value=(this.value=='Enter Username…')? '' : this.value;" /><br />
<span id="errorUserNameMissing" style="display: none;"><font
color="red">*Enter user name.</font></span>
<input type="password" name="txtPassword" id="pass" value="Enter Password…" onfocus="this.value=(this.value=='Enter Password…')? '' : this.value ;" /><br/> <br/><span
id="errorPasswordMissing" style="display: none;"><font
color="red">*Enter Password.</font></span>
<select name="txtCategory" id="txtCategory" style="width: 230px">
<option value="unknown">Select your Category</option>
<option value="Admin">Admin</option>
<option value="Affiliate">Affiliate</option>
<option value="Client">Client</option>
</select>
</div>
<div class="fl_right">
<input type="submit" name="login_go" id="login_go"
value="»" />
</div>
</fieldset>
</form>
<p>
» Lost Your Password | Create An Account »
</p>
</div>
<br class="clear" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
And this is my CSS
#CHARSET "ISO-8859-1";
#top {
margin: 0;
padding: 0;
font-size: 12px;
font-family: verdana, Arial, Helvetica, sans-serif;
color: #000000;
background-color: #DDDDDD;
}
.clear {
clear: both;
}
br.clear {
clear: both;
margin-top: -15px;
}
a {
outline: none;
text-decoration: none;
}
.fl_left {
float: left;
}
.fl_right {
float: right;
}
div.wrapper {
display: block;
width: 100%;
margin: 0;
text-align: left;
}
div.wrapper h1,div.wrapper h2,div.wrapper h3,div.wrapper h4,div.wrapper h5,div.wrapper h6
{
margin: 0 0 20px 0;
padding: 0 0 8px 0;
font-size: 20px;
font-weight: normal;
font-family: Georgia, "Times New Roman", Times, serif;
border-bottom: 1px dotted #DDDDDD;
}
.col1 {
color: #2684B7;
background-color: #E3F1F9;
}
.col6 {
color: #999999;
background-color: #F3F3F3;
}
.col6 a {
color: #2684B7;
background-color: #F3F3F3;
}
#logo {
width: 378px;
}
#header,#head {
color: #2684B7;
position: relative;
margin: 0 auto 0;
display: block;
width: 960px;
}
#header {
padding: 30px 0;
font-family: Georgia, "Times New Roman", Times, serif;
}
#header #logo {
display: block;
float: left;
width: 300px;
width: 100%;
margin-top: 7px;
}
#header #logo h1,#header #logo p {
margin: 0;
padding: 0;
line-height: normal;
}
#header #logo h1 {
margin: 0 0 10px 0;
padding: 0;
font-size: 36px;
border: none;
}
#header h1 a {
color: #3A6C86;
background-color: #E3F1F9;
}
#header #login {
width: 300px;
height: 250px;
float: right;
padding: 10px 10px 12px 10px;
color: #000000;
background-color: #ADD6ED;
}
#header #login p {
margin: 0 0 8px 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#head {
padding: 30px 0;
}
#head h2 {
margin-bottom: 10px;
border-bottom: 1px dotted #999999;
}
#login {
display: block;
float: right;
width: 300px;
}
form,fieldset,legend {
margin: 0;
padding: 0;
border: none;
}
legend {
display: none;
}
#header input {
display: block;
float: left;
width: 155px;
margin: 0 11px 0 0;
padding: 5px;
color: #4C4C4C;
background-color: #FFFFFF;
border: 1px solid #396B86;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#header input#login_go {
width: auto;
height: auto;
margin: 0;
padding: 4px;
font-weight: bold;
text-transform: uppercase;
color: #FFFFFF;
background-color: #4D9FC7;
cursor: pointer;
}
#head form {
display: block;
width: 300px;
margin: 0;
padding: 10px 0 0 0;
border: none;
}
#head input {
display: block;
width: 218px;
margin: 0 0 10px 0;
padding: 5px;
color: #FFFFFF;
background-color: #2684B7;
border: 1px solid #1C5E82;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#head input#login_go {
width: 58px;
height: 100px;
margin: 0;
padding: 0;
font-weight: bold;
text-transform: uppercase;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 60px;
cursor: pointer;
}
#head select#txtCategory {
width: width:956px;
}
And this is my LoginValidate.js
function loginValidate() {
var valid = true;
var validationMessage = 'Please correct the following errors:\r\n';
document.getElementById('errorUserNameMissing').style.display = 'none';
document.getElementById('errorPasswordMissing').style.display = 'none';
if ((document.getElementById('uname').value = 'Enter Username…')||(document.getElementById('uname').value.length == 0) ){
validationMessage = validationMessage + ' - UserName is missing\r\n';
document.getElementById('errorUserNameMissing').style.display = 'block';
valid = false;
} else {
document.getElementById('errorUserNameMissing').style.display = 'none';
}
if ((document.getElementById('pass').value = 'Enter Password…')||(document.getElementById('pass').value.length == 0) ){
validationMessage = validationMessage + ' - Password is missing\r\n';
document.getElementById('errorPasswordMissing').style.display = 'block';
valid = false;
} else {
document.getElementById('errorPasswordMissing').style.display = 'none';
}
if (valid == false) {
alert(validationMessage);
}
return valid;
}
please some one help in validating the login page with errors on not providing any input(it should display respective error message).
Thanks in advance
In the JavaScript
document.getElementById('uname').value
returns "Enter Username…" that is the default value and
document.getElementById('uname').value.length
returns 15 that's why the condition is not matched.
You have to check for default value along with length.
document.getElementById('uname').value = 'Enter Username…'
But once this field is focused the value is empty and it works fine.
your code provide null pointer exception here
document.getElementById('errorPassWordMissing').style.display = '';
exception raise and your function does not return false and form post data.
use placeholder property instead of value and focus event, for example
<input type="password" name="txtPassword" id="pass" placeholder="Enter password…" />
also may be you should use jQuery and validation plugin
http://plugins.jquery.com/validate/
One obvious problem I can see. This is wrong:
document.getElementById('errorUserNameMissing').style.display = '';
You shouldn't be setting style.display to a blank string. It should be one of the standard CSS display types, like "inline" or "block" (and there are other types).
I built a form that I need to validate with JavaScript. I tried to use this post but cannot duplicate the results: inline javascript form validation
I've created a JSBin with my code so far, including CSS and JS files: http://jsbin.com/oligol/1/edit
This is my HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>xxx</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css" media="all">#import "css/master.css";</style> <style type="text/css" media="all">#import "css/master.css";</style>
<script src="contact.js" type="text/javascript">
</script>
</head>
<body>
<div id="page-container">
<div id="header"> <img src="images/header.jpg" width="900" height="243" />
</div>
<div id="main-nav">
<ul id="navlist">
<li id="active"><a href="index.html" >HOME</a></li>
<li>REQUIREMENTS</li>
<li>LINKS</li>
<li>TESTIMONIALS</li>
<li>CONTACT US</li>
</ul>
</div>
<p> </p>
<div id="content">
<p><p><p>xxxxxxx welcomes all correspondence.<br />
Please use the form below for any questions, feedback and suggestions.<br />
or call <strong><em>xxx xxx </em> xxx.xxx.7009 </strong><br />
All information is confidential<br />
<!-- <b>* required fields</b>-->
<form onSubmit="return checkForm(); method="post" action="xxx#gmail.com" >
<fieldset><strong>* required fields</strong>
<legend>Contact Form</legend>
<label for="name"> Name : <span class="required"></span></label>
<div class="input">
<input type="text" name="txtName" id="name" size="30" /><span class="message"></span>
</div>
<div class="error" id="emailError">
Required: Please enter your email address
</div>
<div class="error" id="emailError2">
This doesn't look like a real email address, please check and reenter
</div>
<label for="FieldData2"><strong> E-mail
address * :</strong>
</label>
<div class="input">
<input type="text" name="FieldData1" id="FieldData2" value="" size="30" /><span class="message"></span>
</div>
<label for="comments"> <strong>Message * :</strong>
</label><span class="message"></span>
<div class="input">
<textarea name="Message" id="message" margin-left="20px"
margin-bottom="20px" rows="18" cols="40">
</textarea>
<input type="submit" value="Send Message" name="submit" >
</div>
</fieldset>
</form>
</div>
<div id="footer">
<p>Copyrights 2013 xxx xxx | Web Design by xxx</p>
</div>
</body>
</html>
This is my CSS:
#charset "UTF-8";
/* CSS Document */
html, body {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, Verdana, sans-serif;
font-size: 14px;
background-image: url(../images/backgrd.jpg);
}
.hidden {
display: none;
}
#page-container {
width: 900px;
margin: auto;
}
#containerdiv { float: left; position: relative; }
.cornerimage { position: absolute; top: 0; left: 0; }
#main-nav {
margin-top: -142px;
height: 40px;
}
#navlist {
margin-left: 290px;
padding:0;
text-align: left;
}
#navlist ul, #navlist li {
margin: 0;
padding: 0;
color: #000000;
font-family: Arial, Helvetica, Verdana, sans-serif;
font-weight:bold;
font-size: 16px;
display: inline;
list-style-type: none;
}
#navlist a:link, #navlist a:visited {
line-height: 20px;
margin: 0 10px 0 10px;
text-decoration: none;
color: #CDCDCD;
}
#navlist a:link#current, #navlist a:visited#current,
#navlist a:hover {
border-bottom: 3px solid #000000;
padding-bottom: 2px;
background: clear;
color: #000000;
}
#header {
height: 243px;
background: #CDCDCD;
}
#sidebar-a {
float: right;
width: 181px;
height: 441px;
}
#ftcredits {
text-align: left;
padding: 5px 0 5px 0;
font-family:Tahome, Arial, Helvetica, Sans-serif;
font-size: 11px;
color: #5d3b28;
}
#ftcredits a:link, a:visited {
color: #666633;
text-decoration: none;
}
#ftcredits a:hover {
color: #db6d16;
}
#content {
padding-left: 70px;
padding-right: 10px;
background: #CDCDCD;
overflow: hidden;
}
#footer {
font-family:Tahome, Arial, Helvetica, Sans-serif;
font-size: 11px;
color: #333333;
background: #CDCDCD;
padding: 1px 20px;
line-height: 13px;
border-top: 2px solid #5d3b28;
}
#footer a {
color: #003366;
text-decoration: underline;
}
#footer a:hover {
color: #003366;
}
h1 {color: #801F18;
font-family: Arial, Helvetica, Verdana, sans-serif;
font-size: 21px;
font-weight: bold;
text-align: center;
padding-bottom: 15px;
}
h2 {
color: #801F18;
font-size: 18px;
font-weight: bold;
text-align: center;
padding-bottom: 15px;
}
h5 {
font-size: 15px;
color: #663333;
line-height:150%
}
exc {
font-size: 17px;
color: #000000;
line-height:150%
}
p {
line-height:150%
}
h3 {
color: #666633;
font-family: Arial, Helvetica, Verdana, sans-serif;
font-size: 11px;
height: 350px;
margin-top: -350px;
margin-left: 460px;
}
hr {
width: 100%;
border-top: 2px solid #333333;
border-bottom: 0;
float: left;
line-height: 13px;
}
.double_column_list li {float:left; width:50%;
}
fieldset{ padding:10px;
width:600px;
}
label {width:170px;
float:left;
text-align:right;
clear:both;
margin-bottom:20px;
}
.input {width:350px;
float:left;
margin-left:10px;
}
error{
}
#content a {
color: #003366;
text-decoration: underline;
}
#content h2 {
margin: 0;
padding: 0;
padding-bottom: 15px;
}
#content p {
margin: 0;
padding: 0;
line-height:150%;
padding-bottom: 15px;
}
.container1 {
display: inline;
float: left;
width: 320px;
height:200px;
padding: 10px;
margin-bottom: 20px;
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border: 1px solid #black;
zoom: 100%;
background-color: rgba(83,85,89,0.3);
}
.container2 {
width: 320px;
height:200px;
padding: 10px;
margin-left: 50px;
margin-bottom: 20px;
display: inline;
float: left;
/*-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border: 1px solid #black;
zoom: 100%;
background-color: rgba(83,85,89,0.3);*/
}
This is my JS:
function checkForm() {
hideAllErrors();
var formIsValid =
/*showErrorAndFocusIf('FieldData0', isEmpty, 'nameError')*/
/*&&*/ showErrorAndFocusIf('FieldData2', isEmpty, 'emailError');
showErrorAndFocusIf('FieldData2', isAnInvalidEmail, 'emailError2');
/*&& showErrorAndFocusIf('FieldData3', isEmpty, 'categoryError')*/
showErrorAndFocusIf('FieldData1', isEmpty, 'messageError');
/* For debugging, lets prevent the form from submitting. */
if (formIsValid) {
alert("Valid form!");
return false;
}
return formIsValid;
}
function showErrorAndFocusIf(fieldId, predicate, errorId) {
var field = document.getElementById(fieldId);
if (predicate(field)) {
document.getElementById(errorId).style.display = 'inline';
if (field.select) {
field.select();
}
field.focus();
return false;
}
return true;
}
function isEmpty(field) {
return field.value == '';
}
function isAnInvalidEmail(field) {
var email = field.value;
var ok = "1234567890qwertyuiop[]asdfghjklzxcvbnm.#-_QWERTYUIOPASDFGHJKLZXCVBNM";
for(i = 0; i < email.length; i++){
if(ok.indexOf(email.charAt(i)) < 0) {
return true;
}
}
re = /(#.*#)|(\.\.)|(^\.)|(^#)|(#$)|(\.$)|(#\.)/;
re_two = /^.+\#(\[?)[a-zA-Z0-9\-\.]+\.([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
return re.test(email) || !re_two.test(email);
}
function hideAllErrors() {
/*document.getElementById("nameError").style.display = "none"*/
document.getElementById("emailError").style.display = "none";
document.getElementById("emailError2").style.display = "none";
/*document.getElementById("categoryError").style.display = "none"*/
document.getElementById("messageError").style.display = "none";
}
A few points:
Your HTML is invalid, you should something like the W3C Validator to check your HTML.
You element names and ids are inconsistent. E.g. Your "Name" field is named "txtName" but has the id "name" and your "E-mail address" field is named "FieldData1" but has the id "FieldData2". Use consistent and sensible names so that the HTML and JavaScript are easy to write and understand.
You've broken the JavaScript by removing the AND operators (&&) in the checkForm function. The showErrorAndFocusIf function returns a boolean value that is true when the specified field is valid. The return values of the calls are supposed to be combined for all of the validation constraints to determine if the whole form has passed validation.
Lastly, the ids of the fields and error messages used in the JavaScript did not match the HTML. The JavaScript uses the DOM's getElementById function to retrieve references to the fields and the error messages in the HTML, so you have to make sure that the ids match in order for the code to work.
I've corrected these problems in a new JSBin: http://jsbin.com/otinoz/2/edit