Running ajax query after validation

Running ajax query after validation - javascript

I have an ajax insert script and a validation script.
But the insert script is always working, so even if the validation sends a message that some fields are wrong, it still uploads the data.
How do I change my code so that the insert query only runs after the validation?
My code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta charset="utf-8">
<title>Form</title>
</head>
<script type="text/javascript" src="js/validate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<body>
<div id="wrap">
<table>
<td>
<form name="form">
<tr>
<p class="names">Voornaam:</p> <p><input type="text" name="voornaam" id="voornaam"></p>
</tr>
<tr>
<p class="names">Achternaam:</p> <p><input type="text" name="achternaam" id="achternaam"></p>
</tr>
<tr>
<p class="names">Telefoonnummer:</p> <p><input type="text" name="telefoonnummer" id="telefoonnummer"></p>
</tr>
<tr>
<p class="names">Emailadres:</p> <p><input type="text" name="email" id="email"></p>
</tr>
<tr>
<input class="knop" type="submit" name="insert" value="Opsturen" id="insert">
</tr>
</form>
</td>
</table>
<br>
<div id="berichten">
</div>
<script>
var validator = new FormValidator('form', [{
name: 'voornaam',
display: 'Voornaam',
rules: 'required'
}, {
name: 'achternaam',
display: 'achternaam',
rules: 'required'
},{
name: 'telefoonnummer',
display: 'telefoon',
rules: 'required|numeric'
},{
name: 'email',
display: 'email',
rules: 'required|valid_email'
}], function(errors, event) {
var berichten = document.getElementById('berichten');
berichten.innerHTML = '';
if (errors.length > 0) {
for (var i = 0, l = errors.length; i < l; i++) {
berichten.innerHTML += errors[i].message + '<br>';
}
}
});
</script>
<script type="text/javascript">
$(function(){
$('#insert').click(function(){
var voornaam = $('#voornaam').val();
var achternaam = $('#achternaam').val();
var telefoonnummer = $('#telefoonnummer').val();
var email = $('#email').val();
$.post('action.php',{action: "button", voornaam:voornaam, achternaam:achternaam, telefoonnummer:telefoonnummer, email:email},function(res){
$('#result').html(res);
});
document.getElementById('berichten').innerHTML = 'Verstuurd!';
});
});
</script>
</div>
</body>
</html>

I think you should be sending the ajax call in the FormValidator callback if there are no errors.
function(errors, event) {
var berichten = document.getElementById('berichten');
berichten.innerHTML = '';
if (errors.length > 0) {
for (var i = 0, l = errors.length; i < l; i++) {
berichten.innerHTML += errors[i].message + '<br>';
}
} else {
var voornaam = $('#voornaam').val();
var achternaam = $('#achternaam').val();
var telefoonnummer = $('#telefoonnummer').val();
var email = $('#email').val();
$.post('action.php',{action: "button", voornaam:voornaam, achternaam:achternaam, telefoonnummer:telefoonnummer, email:email},function(res){
$('#result').html(res);
});
document.getElementById('berichten').innerHTML = 'Verstuurd!';
}
}

http://rickharrison.github.io/validate.js/
Before formValidator add is_valid = true :
var is_valid = true;
var validator = new FormValidator.....
In event error add is_valid = false if length > 0 :
function(errors, event) {
var berichten = document.getElementById('berichten');
berichten.innerHTML = '';
if (errors.length > 0) {
is_valid = false;
}
Finally :
$('#insert').click(function(){
if(is_valid){
// is valid, do code here
}
});

Related

google spreadsheet search from textfinder and return to HTML

Id like search by textFinder and return it to an array for html table. I have multiple spreadsheets and my intention is to retrieve spreadsheets data from one text input using textFinder then send them to a HTML page(using google HTML templates).
I have tried with the below codes but couldn't find a solution please help.
Code.gs
function doGet(){
var html = HtmlService.createTemplateFromFile("index");
var output = html.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
return output;
}
function getFilter(search){
var ssID = "Sheet ID",
sheet = SpreadsheetApp.openById(ssID).getSheets()[2];
var Avals = sheet.getRange("A1:A").getValues();
var Alast = Avals.filter(String).length;
var ranges = [];
if ("name" in search && search.name != "") {
ranges = sheet.getRange(2, 4, Alast - 1, 3).createTextFinder(search.name).findAll();
}
if ("ac" in search && search.ac != "") {
var acRanges = sheet.getRange(2, 3, Alast - 1, 1).createTextFinder(search.ac).findAll();
if (ranges.length > 0) {
ranges = ranges.filter(function(r1) {return acRanges.some(function(r2) {return r1.getRow() == r2.getRow()})});
} else {
ranges = acRanges;
}
for (i = 0; i < ranges.length; i++) {
var row = ranges[i].getRow();
var lastCol = sheet.getLastColumn();
var values = sheet.getRange(row, 1, 1, lastCol).getDisplayValues(); //get all values for the row
return values;
}
}
}
HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="text/javascript">
function setPageValues () {
var search = document.getElementsByName('searchtext')[0].value;
var ac = document.getElementsByName('ac')[0].value;
var obj = {};
if (!search && !ac) alert("No search values.");
if (search) {
obj.name = search;
}
if (ac) {
obj.ac= ac;
}
google.script.run.withSuccessHandler(disp).getFilter(obj);
}
</script>
</head>
<body>
<input type="text" name="ac">
<input type="text" name="searchtext">
<input type="button" value="Search" onclick="setPageValues();">
<br /><br />
<div name="resultbox">
<? var values = getFilter(); ?>
<table>
<? for (var i = 0; i < values.length; i++) { ?>
<tr>
<? for (var j = 0; j < values.length; j++) { ?>
<td><?= values[i][j] ?></td>
<? } ?>
</tr>
<? } ?>
</table>
</div>
</body>
<script>
</script>
</html>

Can't find the variable "SSL" javascript

ERROR: Can't find variable SSL
Good morning, I was finishing the script when I find a problem that I couldn't solve. When I click on a button, it tells me can't find the variable "SSL" but it is created (just show the error when I click one button), can you tell me if there are some misstake?
html:
<!DOCTYPE html>
<html>
<head>
<title>SSL Checker</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/json.json" charset="utf-8"></script>
</head>
<body onLoad="start()">
<div id="title">
<h1>SSL Checker</h1>
</div>
<div id="data">
<form action="javascript:void(0);" method="POST" onsubmit="SSL.Add()">
<input type="text" id="add-name" placeholder="Name"></input>
<input type="text" id="add-link" placeholder="Link"></input>
<input type="submit" value="Add">
</form>
<div id="edit" role="aria-hidden">
<form action="javascript:void(0);" method="POST" id="saveEdit">
<input type="text" id="edit-name">
<input type="submit" value="Edit" /> <a onclick="CloseInput()" aria-label="Close">✖</a>
</form>
</div>
<p id="counter"></p>
</div>
<div id="table">
<table style="overflow-x:auto;">
<tr>
<th>Sites:</th>
</tr>
<tbody id="urls">
</tbody>
</table>
</div>
</body>
</html>
js:
function start() {
var SSL = new function() {
//List urls to check
this.el = document.getElementById('urls');
this.Count = function(data) {
var el = document.getElementById('counter');
var name = 'url';
if (data) {
if (data > 1) {
name = 'urls';
}
el.innerHTML = 'There are:' + ' ' + data + ' ' + name;
} else {
el.innerHTML = 'No ' + name;
}
};
//Buttons configuration
this.FetchAll = ss =function() {
var data= '';
if (MyJSON.length > 0) {
for (i = 0; i < MyJSON.length; i++) {
data += '<tr>';
data += '<td>' + MyJSON[i].name+ '</td>';
data += '<td><button onclick="SSL.Edit(' + i + ')">Edit</button></td>';
data += '<td><button onclick="SSL.Delete(' + i + ')">Delete</button></td>';
data += '</tr>';
}
}
this.Count(MyJSON.length);
return this.el.innerHTML = data;
};
//Add name
this.Add = function() {
el = document.getElementById('add-name');
el1 = document.getElementById('add-link')
var url = el.value;
var url1 = el1.value;
if (url) {
MyJSON.name.push(url.trim());
el.value = '';
this.FetchAll();
}
if (url) {
MyJSON.url.push(url1.trim());
el1.value = '';
this.FetchAll();
}
}
//Edit
this.Edit = function(item) {
var el = document.getElementById('edit-name');
el.value = MyJSON.name[item];
document.getElementById('edit').style.display = 'block';
self = this;
document.getElementById('saveEdit').onsubmit = function() {
var url = el.value;
if (url) {
self.urls.splice(item, 1, url.trim());
self.FetchAll();
CloseInput();
}
}
};
//Delete
this.Delete = function(item) {
MyJSON.name.splice(item, 1);
this.FetchAll();
};
}
SSL.FetchAll();
function CloseInput() {
document.getElementById('edit').style.display = 'none';
}
}

Solved, the variable SSL was into start so, it wasn't global variable.
I needed to do window.SSL = SSL and It works.
Thanks you CertainPerformance and #Chriag Ravindra

How can I concat the content of dynamic textboxes to a single variable?

Here is the file (test.php) than I try to run on my localhost. Javascript works and it creates the text boxes. PHP-part does not work and makes problem.
<html>
<head>
<title>Test</title>
<script>
function newCheckbox() {
var aLabel = document.form1.getElementsByTagName('label');
var last = aLabel[aLabel.length-1];
var label = document.createElement('label');
label.appendChild(Box(aLabel.length));
label.appendChild(document.createTextNode(' '+document.getElemenById('text').value));
last.parentNode.insertBefore(label, last);
document.getElementById('text').value = '';
}
function Box(num) {
var elm = null;
try {
elm=document.createElement('<input type="checkbox" class="chk">');
}
catch(e) {
elm = document.createElement('input');
elm.setAttribute('type', 'checkbox');
elm.className='chk';
}
return elm;
}
function delBoxes(){
var texts = document.form1.getElementsByTagName('label');
var chbox = document.form1.getElementsByClassName('chk');
for(var i = 0; i<texts.length-1; i++){
if(chbox[i].checked){
chbox[i].parentNode.removeChild(chbox[i]);
texts[i].parentNode.removeChild(texts[i]);
}
}
}
</script>
<?php
$text_0= $_POST['text[0]'];
echo $text_0;
$textboxes = array();
for($i = 0;$i<count($_POST['text[]']); $i++)
{
$textboxes = $_POST['text'][$i];
}
$data=$textboxes
?>
</head>
<body>
<form action="test.php" name="form1" method="post">
<div>
<label>Checkbox text:<input type="text" name="text[]"></label><br>
<input type="button" onclick="newCheckbox();"value="add">
<input type="button" value="Delete" onclick = "delBoxes();" />
</div>
</form>
</body>
</html>
When I run the code I have the following problem
Undefined index: text[0]
Undefined index: text[]
I appreciates your help.

Delete row dynamically in JavaScript

I'm doing a form (a simple WEB form, based on the scripts from Tom Negrino, JavaScript 8, and w3Schools) where the user press the Submit button and some of the fields from the form are displayed in one table under the form.
This is the result
Form
Now, I want to delete the row , but only the row that the user wants to delete clicking on the corresponding row.
This is my JavaScript
window.onload = initForms;
function initForms() {
for (var i=0; i< document.forms.length; i++) {
document.forms[i].onsubmit = validForm;
}
document.getElementById("sunroof").onclick = doorSet;
document.getElementById("estado").selectedIndex = 0;
document.getElementById("estado").onchange = populateDays;
/***********/
//document.getElementsByTagName("form")[0].onsubmit = addNode;
/***********/
document.getElementById("env").onclick = function() {
myFunction()
};
}
function validForm() {
var allGood = true;
var allTags = document.getElementsByTagName("*");
for (var i=0; i<allTags.length; i++) {
if (!validTag(allTags[i])) {
allGood = false;
}
}
return allGood;
function validTag(thisTag) {
var outClass = "";
var allClasses = thisTag.className.split(" ");
for (var j=0; j<allClasses.length; j++) {
outClass += validBasedOnClass(allClasses[j]) + " ";
}
thisTag.className = outClass;
if (outClass.indexOf("invalid") > -1) {
invalidLabel(thisTag.parentNode);
thisTag.focus();
if (thisTag.nodeName == "INPUT") {
thisTag.select();
}
return false;
}
return true;
function validBasedOnClass(thisClass) {
var classBack = "";
switch(thisClass) {
case "":
case "invalid":
break;
case "reqd":
if (allGood && thisTag.value == "") {
classBack = "invalid ";
}
classBack += thisClass;
break;
case "radio":
if (allGood && !radioPicked(thisTag.name)) {
classBack = "invalid ";
}
classBack += thisClass;
break;
case "email":
if (allGood && !validEmail(thisTag.value)) classBack = "invalid ";
break;
case "isNum":
case "isZip":
classBack += thisClass;
break;
default:
if (allGood && !crossCheck(thisTag,thisClass)) {
classBack = "invalid ";
}
classBack += thisClass;
}
return classBack;
}
function crossCheck(inTag,otherFieldID) {
if (!document.getElementById(otherFieldID)) {
return false;
}
return (inTag.value != "" || document.getElementById(otherFieldID).value != "");
}
function validEmail(email) {
var re = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
return re.test(email);
}
function radioPicked(radioName) {
var radioSet = "";
for (var k=0; k<document.forms.length; k++) {
if (!radioSet) {
radioSet = document.forms[k][radioName];
}
}
if (!radioSet) {
return false;
}
for (k=0; k<radioSet.length; k++) {
if (radioSet[k].checked) {
return true;
}
}
return false;
}
/****Veamos si esto funciona****/
/*function checkboxPicked(checkboxName) {
var checkboxSet = "";
for (var k = 0; k < document.forms.length; k++) {
if (!checkboxSet) {
checkboxSet = document.forms[k][checkboxName];
}
}
if (!checkboxSet) {
return false;
}
for ( k = 0; k < checkboxSet.length; k++) {
if (checkboxSet[k].checked) {
return true;
}
}
return false;
}*/
/*****************************************/
function invalidLabel(parentTag) {
if (parentTag.nodeName == "LABEL") {
parentTag.className += " invalid";
}
}
}
}
function populateDays() {
var tamps = new Array("Ikon Hatch", "Fiesta", "Focus", "Mustang");
var nvoleon = new Array("Aveo", "Spark");
var slp = new Array("Gol", "CrossFox", "Clasico", "Jetta");
var estado = document.getElementById("estado");
var estadoStr = estado.options[estado.selectedIndex].value;
if (estadoStr != "") {
var valueEst = parseInt(estadoStr);
document.getElementById("ciudad").options.length = 0;
if (valueEst == 0) {
for (var i = 0; i < tamps.length; i++) {
document.getElementById("ciudad").options[i] = new Option(tamps[i]);
}
} else if (valueEst == 1) {
for (var i = 0; i < nvoleon.length; i++) {
document.getElementById("ciudad").options[i] = new Option(nvoleon[i]);
}
} else if (valueEst == 2) {
for (var i = 0; i < slp.length; i++) {
document.getElementById("ciudad").options[i] = new Option(slp[i]);
}
}
} else {
document.getElementById("ciudad").options.length = 0;
document.getElementById("ciudad").options[0] = new Option("Model");
}
}
function doorSet() {
if (this.checked) {
document.getElementById("twoDoor").checked = true;
}
}
/*****************************/
/*function addNode() {
var inText = document.getElementById("estado").value;
var inText1 = document.getElementById("ciudad").value;
var newText = document.createTextNode(inText);
var newText1 = document.createTextNode(inText1);
var newGraf = document.createElement("table");
newGraf.appendChild(newText);
newGraf.appendChild(newText1);
var docBody = document.getElementsByTagName("body")[0];
docBody.appendChild(newGraf);
return false;
}*/
function myFunction() {
var table = document.getElementById("myTable");
var email= document.getElementById("emailAddr").value;
var brand=document.getElementById("estado").value;
var model=document.getElementById("ciudad").value;
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = email;
cell2.innerHTML = model;
cell3.innerHTML = brand;
}
And my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Formulario</title>
<link rel="stylesheet" href="css/script06.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/bootstrap-3.2.0-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-3.2.0-dist/css/bootstrap-theme.min.css">
<!--No se te olvide el css-->
<!--<link rel="stylesheet" href="css/bootstrap-3.2.0-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-3.2.0-dist/css/bootstrap-theme.min.css">-->
<script src="js/script08.js"></script>
<!--No se te olvide el js-->
</head>
<body>
<header></header>
<main>
<article>
<p>
<h1>Choose your car</h1>
</p>
</article>
<form action="#">
<p>
<label for="emailAddr">Email Address:
<input id="emailAddr" type="text" size="40" class="reqd email">
</label>
</p>
<p>
<label for="passwd1">Password:
<input type="password" id="passwd1" class="reqd">
</label>
</p>
<p>
<label for="passwd2">Repeat Pass:
<input type="password" id="passwd2" class="reqd passwd1">
</label>
</p>
<!--<p>
<label for="color">Colors:
<select id="color" class="reqd">
<option value="" selected>Choose a color</option>
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
</select> </label>
</p>-->
<p>
Options: <label for="sunroof">
<input type="checkbox" id="sunroof" value="Yes">
Sunroof (Two door only)</label>
<label for="pWindows">
<input type="checkbox" id="pWindows" value="Yes">
Power Windows</label>
</p>
<p>
Doors: <label for="DoorCt"><!--Doors: -->
<input type="radio" id="twoDoor" name="DoorCt" value="twoDoor" class="radio">
Two</label>
<label for="DoorCt">
<input type="radio" id="fourDoor" name="DoorCt" value="fourDoor" class="radio">
Four </label>
</p>
<p>
<label>Brand:</label>
<select id="estado" class="reqd">
<option value="">Brand</option>
<option value="0">Ford</option>
<option value="1">Chevrolet</option>
<option value="2">Volkswagen</option>
</select>
<select id="ciudad" class="reqd">
<option>Model</option>
</select>
</p>
<p>
<input type="submit" value="Enviar" id="env">
<input type="reset">
</p>
</form>
<br />
<!--Veamos si funciona-->
<table id="myTable">
<tr>
<td>Email</td>
<td>Model</td>
<td>ID Brand</td>
</tr>
<tr>
</tr>
</table>
</main>
<footer></footer>
</body>
</html>
I tried adding and extra cell in the JavaScript:
cell4.innerHTML = <button onclick="myDeleteFunction()">Del</button>;
where calls the function
function myDeleteFunction() {
document.getElementById("myTable").deleteRow();
}
to delete to row, but it didn't work.
I'll appreciate any help. Thanks.

var node = nodes[0];
if (univArray[z].ownership != "public") {
node.parentNode.removeChild(node)
}

If you want to delete a table row based on a click on the row, you can use something like:
<tr onclick="this.parentNode.removeChild(this)">
If you want to do that based on a button in the row, then:
<tr>
<td><button onclick="deleteRow(this)">Delete this row</button>
Then the deleteRow function is:
function deleteRow(element) {
var row = upTo(element, 'tr');
if (row) row.parentNode.removeChild(row);
}
A helper function
// Return first ancestor of el with tagName
// or undefined if not found
function upTo(el, tagName) {
tagName = tagName.toLowerCase();
while (el && el.parentNode) {
el = el.parentNode;
if (el.tagName && el.tagName.toLowerCase() == tagName) {
return el;
}
}
// Many DOM methods return null if they don't
// find the element they are searching for
// It would be OK to omit the following and just
// return undefined
return null;
}
The deleteRow function can be put anywhere inside a row, and the row can be in any type of table section element (head, body or foot). All you need to do is to pass a reference to any element inside the row (button, checkbox, cell, whatever).
The trouble with the table.deleteRow method is that you have to know the row index in the element that you're calling the method on. Rows have a rowIndex property that is their index in the table they are in, so you have to go up to the table to use that (i.e. row.parentNode.parentNode), whereas using the removeChild method doesn't require you to work out where in the table the row is, or to even know whether the parent is a head, body or foot section.
Edit
To add the listener dynamically, you can slightly modify the function and add a class to the buttons that will delete rows, e.g.
<!-- Sample markup -->
<table>
<tr>
<td><input type="button" class="rowDeleter" value="Delete Row">
<tr>
<td><input type="button" class="rowDeleter" value="Delete Row">
<tr>
<td><input type="button" class="rowDeleter" value="Delete Row">
</table>
Adding a class means you can easily identify the elements to add the listener to.
<script>
window.onload = function() {
// querySelectorAll and addEventListener require IE 8 or higher, use some other
// method if support for older browsers is required
var els = document.querySelectorAll('.rowDeleter');
for (var i=0, iLen=els.length; i<iLen; i++) {
els[i].addEventListener('click', deleteRow, false);
}
}
// When attached using addEventListener, this in the function
// will be the element that called the listener
function deleteRow() {
var row = upTo(this, 'tr');
if (row) row.parentNode.removeChild(row);
}
// Previously shown helper
function upTo(el, tagName) {
tagName = tagName.toLowerCase();
while (el && el.parentNode) {
el = el.parentNode;
if (el.tagName && el.tagName.toLowerCase() == tagName) {
return el;
}
}
return null;
}
</script>

JS verify login form - where I went wrong?

I have nut to crack, that cracks my head for some time now.
I'm programming beginner, that's for introducing. I try to achieve JS form validation, that checks input fields email and password and if it match some criteria, unset "disabled" attribute on login button.
I tried components of my JS code and it works just fine, but when I merge it into function validate(), it just dont works and I cannot find reason why.
Here is my HTML:
<!DOCTYPE html>
<head>
<meta charset='UTF-8' />
<title>$title</title>
<link href='css/style.css' rel='stylesheet' type='text/css' />
<script type='text/javascript' charset='utf-8' src='js/validateInput.js'></script>
</head>
<body>
<div id='header'><h1>$title<h1></div>
<form name='login' method='post' action=''>
<table border='0'>
<tr>
<th>E-mail:</th>
<td colspan='2'><input type='text' name='email' id='email' size='30' value='$posted_email'
onkeyup='validate()' onclick='validate()' onchange='validate()' />
</td>
</tr>
<tr>
<th>Heslo:</th>
<td><input type='password' name='pword' id='pword' size='21'
onkeyup='validate()' onclick='validate()' onchange='validate()'/></td>
<td><input type='submit' name='login' class='submit' id='loginBtn' value='OK' /></td>
</tr>
</table>
</form>
</body>
Now my JS:
function $(id) {
if (id.indexOf('#') == 0 || id.indexOf('.') == 0) {
var name = id.substr(1);
return id.indexOf('#') == 0 ? document.getElementById(name) : document.getElementsByClassName(name);
}
return (typeof document.getElementById('id') !== 'undefined') ? document.getElementById(id) : document.getElementsByClassName(id);
}
function validateEmail(string) {
var re = /[\w\s\.\$\*\+\/\?\^\{\|\}\(\)]{1,64}#[\w]{1,250}\.[\w]{2,3}/;
return re.test(string);
}
function validate() {
var login = $('#loginBtn');
var email = $('#email');
var pword = $('#pword');
if (!validateEmail(email.value)) {
email.style.color = 'orange';
} else if (pword.length > 0) {
login.disabled = false;
}
return false;
}
window.onload = function() {$('#loginBtn').disabled = true;};
Any thoughts?

The problem is located at this condition :
if (!validateEmail(email.value)) {
email.style.color = 'orange';
} else if (pword.length > 0) {
login.disabled = false;
}
Change your function validate() to below :
function validate() {
var login = $('#loginBtn');
var email = $('#email');
var pword = $('#pword');
var result = false;
if (!validateEmail(email.value)) {
email.style.color = 'orange';
} else {
email.style.color = 'black';
result = true;
}
if (result && pword.value.length > 0) {
login.disabled = false;
} else {
login.disabled = true;
}
}
Fiddle demo.
Hopefully this help.

Develop Reference

JavaScript is the programming language of the Web.

Running ajax query after validation - javascript

Related

google spreadsheet search from textfinder and return to HTML

Can't find the variable "SSL" javascript

How can I concat the content of dynamic textboxes to a single variable?

Delete row dynamically in JavaScript

JS verify login form - where I went wrong?

Categories

Resources