I have a flexdashboard, which is not hosted on a server and I use it as a local html file.
However, I need the content of the HTML to be password protected. I know i can use win-zip, but I was wondering if it would be possible to integrate a simple log-in form with a global username & password.
My attempt:
---
title: "Dashboard"
output:
flexdashboard::flex_dashboard:
vertical_layout: scroll
logo: logo.jpg
shiny: include
---
```{r}
branch <- "test"
num_entries <- 3
```
<style>
.navbar {
background-color:red;
border-color:black;
}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus {
color: black;
background-color: #feb0b0;
}
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
background-color: #feb0b0
}
</style>
<script type = "text/javascript">
// Note: Like all Javascript password scripts, this is hopelessly insecure as the user can see
//the valid usernames/passwords and the redirect url simply with View Source.
// And the user can obtain another three tries simply by refreshing the page.
//So do not use for anything serious!
var count = 2;
function validate() {
var un = document.myform.username.value;
var pw = document.myform.pword.value;
var valid = false;
var unArray = ["Philip", "George", "Sarah", "Michael"]; // as many as you like - no comma after final entry
var pwArray = ["Password1", "Password2", "Password3", "Password4"]; // the corresponding passwords;
for (var i=0; i <unArray.length; i++) {
if ((un == unArray[i]) && (pw == pwArray[i])) {
valid = true;
break;
}
}
if (valid) {
alert ("Login was successful");
window.location = "http://www.google.com";
return false;
}
var t = " tries";
if (count == 1) {t = " try"}
if (count >= 1) {
alert ("Invalid username and/or password. You have " + count + t + " left.");
document.myform.username.value = "";
document.myform.pword.value = "";
setTimeout("document.myform.username.focus()", 25);
setTimeout("document.myform.username.select()", 25);
count --;
}
else {
alert ("Still incorrect! You have no more tries left!");
document.myform.username.value = "No more tries allowed!";
document.myform.pword.value = "";
document.myform.username.disabled = true;
document.myform.pword.disabled = true;
return false;
}
}
</script>
<form name = "myform">
<p>ENTER USER NAME <input type="text" name="username"> ENTER PASSWORD <input type="password" name="pword">
<input type="button" value="Check In" name="Submit" onclick= "validate()">
</p>
</form>
```{r setup, include=FALSE}
library(flexdashboard)
```
Overview {data-orientation=columns}
=====================================
This however, doesn't work, as the username and password appear togather with the dashboard content and not hide it by acting as a landing page.
Any ideas how I can fix this?
Related
I am a high school student and I am trying to make a password cracker to show my school how vulnerable their Student Dashboard is. A student Dashboard is a website that contains student accounts, links, and private information like addresses, passwords, and relatives.
Everyone's password has the following syntax: Pmonth/day/year
EXAMPLE: P05/03/2005
There is a problem though, when the code clicks the sign in button, the URL changes, and the page reloads, which stops the code when I run it in the console.
Is there a way that I could keep the code running from console even if page reloads.
I have thought of using web cookies to store the last used password, and then when the page reloads, just input it into the password textbox, but I am not sure, since I haven't used cookies before.
Any help is greatly appreciated.
What I am aiming to do is that I input an Id, and then it tries to crack the password by going through all dates a year has after 2003.
I will appreciate all answers, but I would like my answer in raw javascript(no libraries).
The sign in page consists of an username textbox, a password textbox and a sign in button.
Here's what the sign in page looks like: Sign in page
Here is the source code of the page:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10.000"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<meta http-equiv="cache-control" content="no-cache,no-store"/>
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="expires" content="-1"/>
<meta name='mswebdialog-title' content='Connecting to Broward County Public Schools'/>
<title>Sign In</title>
<script type='text/javascript'>
//<![CDATA[
function LoginErrors(){this.userNameFormatError = 'Enter your user ID in the format \u0026quot;domain\\user\u0026quot; or \u0026quot;user#domain\u0026quot;.'; this.passwordEmpty = 'Enter your password.'; this.passwordTooLong = 'Password must be shorter than 128 characters.';}; var maxPasswordLength = 128;
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
// Copyright (c) Microsoft Corporation. All rights reserved.
function InputUtil(errTextElementID, errDisplayElementID) {
if (!errTextElementID) errTextElementID = 'errorText';
if (!errDisplayElementID) errDisplayElementID = 'error';
this.hasFocus = false;
this.errLabel = document.getElementById(errTextElementID);
this.errDisplay = document.getElementById(errDisplayElementID);
};
InputUtil.prototype.canDisplayError = function () {
return this.errLabel && this.errDisplay;
}
InputUtil.prototype.checkError = function () {
if (!this.canDisplayError){
throw new Error ('Error element not present');
}
if (this.errLabel && this.errLabel.innerHTML) {
this.errDisplay.style.display = '';
var cause = this.errLabel.getAttribute('for');
if (cause) {
var causeNode = document.getElementById(cause);
if (causeNode && causeNode.value) {
causeNode.focus();
this.hasFocus = true;
}
}
}
else {
this.errDisplay.style.display = 'none';
}
};
InputUtil.prototype.setInitialFocus = function (input) {
if (this.hasFocus) return;
var node = document.getElementById(input);
if (node) {
if ((/^\s*$/).test(node.value)) {
node.focus();
this.hasFocus = true;
}
}
};
InputUtil.prototype.setError = function (input, errorMsg) {
if (!this.canDisplayError) {
throw new Error('Error element not present');
}
input.focus();
if (errorMsg) {
this.errLabel.innerHTML = errorMsg;
}
this.errLabel.setAttribute('for', input.id);
this.errDisplay.style.display = '';
};
InputUtil.makePlaceholder = function (input) {
var ua = navigator.userAgent;
if (ua != null &&
(ua.match(/MSIE 9.0/) != null ||
ua.match(/MSIE 8.0/) != null ||
ua.match(/MSIE 7.0/) != null)) {
var node = document.getElementById(input);
if (node) {
var placeholder = node.getAttribute("placeholder");
if (placeholder != null && placeholder != '') {
var label = document.createElement('input');
label.type = "text";
label.value = placeholder;
label.readOnly = true;
label.style.position = 'absolute';
label.style.borderColor = 'transparent';
label.className = node.className + ' hint';
label.tabIndex = -1;
label.onfocus = function () { this.nextSibling.focus(); };
node.style.position = 'relative';
node.parentNode.style.position = 'relative';
node.parentNode.insertBefore(label, node);
node.onkeyup = function () { InputUtil.showHint(this); };
node.onblur = function () { InputUtil.showHint(this); };
node.style.background = 'transparent';
node.setAttribute("placeholder", "");
InputUtil.showHint(node);
}
}
}
};
InputUtil.focus = function (inputField) {
var node = document.getElementById(inputField);
if (node) node.focus();
};
InputUtil.hasClass = function(node, clsName) {
return node.className.match(new RegExp('(\\s|^)' + clsName + '(\\s|$)'));
};
InputUtil.addClass = function(node, clsName) {
if (!this.hasClass(node, clsName)) node.className += " " + clsName;
};
InputUtil.removeClass = function(node, clsName) {
if (this.hasClass(node, clsName)) {
var reg = new RegExp('(\\s|^)' + clsName + '(\\s|$)');
node.className = node.className.replace(reg, ' ');
}
};
InputUtil.showHint = function (node, gotFocus) {
if (node.value && node.value != '') {
node.previousSibling.style.display = 'none';
}
else {
node.previousSibling.style.display = '';
}
};
//]]>
</script>
<link rel="stylesheet" type="text/css" href="/adfs/portal/css/style.css?id=D74D4D6943F32AE6F7F11D14D601DBB0E1A58919176EE512150366B6279AAF99" /><style>.illustrationClass {background-image:url(/adfs/portal/illustration/illustration.jpg?id=EB0C84D8C0F5E1E10127F3AD4A4C45BCDAA7AC32FFE204DACEBEAF85C61DA2F9);}</style>
</head>
<body dir="ltr" class="body">
<div id="noScript" style="position:static; width:100%; height:100%; z-index:100">
<h1>JavaScript required</h1>
<p>JavaScript is required. This web browser does not support JavaScript or JavaScript in this web browser is not enabled.</p>
<p>To find out if your web browser supports JavaScript or to enable JavaScript, see web browser help.</p>
</div>
<script type="text/javascript" language="JavaScript">
document.getElementById("noScript").style.display = "none";
</script>
<div id="fullPage">
<div id="brandingWrapper" class="float">
<div id="branding"></div>
</div>
<div id="contentWrapper" class="float">
<div id="content">
<div id="header">
<img class="logoImage" src="/adfs/portal/logo/logo.png?id=4F68FA71CF303418A19ABB7297038B46FA3E25ED3754C2175A7B840EC6F97BE8" alt="Broward County Public Schools"/>
</div>
<div id="workArea">
<div id="authArea" class="groupMargin">
<div id="loginArea">
<div id="loginMessage" class="groupMargin">Sign in with your organizational account</div>
<form method="post" id="loginForm" autocomplete="off" novalidate="novalidate" onKeyPress="if (event && event.keyCode == 13) Login.submitLoginRequest();" action="/adfs/ls/?wctx=WsFedOwinState%3doJ9avOrRYr1UaVPxwGOAIzjfQ78zxpRhLHRmhne8M1AEjI9Y5SUSP0viJgR2iCtpjpu-gGqW73MjMkyVrK9b_N9m5JlVSyznBQxTGDsRm5WDilyumMYDi4x5qL9-To1jCTs2bXP7iiZJuHS0aLiN-jXhIHy26i4J9qpsUHbiivCUYCZQNb0m68RqVJwDU-Cqf0DW1ieuP1_sAcqk3l0nwBlRoG-cO039YHVhBOyZSbnHfZtGqJRSX7p6yt5wwRQ6Y5vz9dPJ8V7FTz6-GIZPnk4ee4A&wa=wsignin1.0&wtrealm=http%3a%2f%2fgb.browardschools.com%2fpinnacle%2fgradebook%2f" >
<div id="error" class="fieldMargin error smallText">
<label id="errorText" for=""></label>
</div>
<div id="formsAuthenticationArea">
<div id="userNameArea">
<input id="userNameInput" name="UserName" type="email" value="" tabindex="1" class="text fullWidth"
spellcheck="false" placeholder="someone#example.com" autocomplete="off"/>
</div>
<div id="passwordArea">
<input id="passwordInput" name="Password" type="password" tabindex="2" class="text fullWidth"
placeholder="Password" autocomplete="off"/>
</div>
<div id="kmsiArea" style="display:none">
<input type="checkbox" name="Kmsi" id="kmsiInput" value="true" tabindex="3" />
<label for="kmsiInput">Keep me signed in</label>
</div>
<div id="submissionArea" class="submitMargin">
<span id="submitButton" class="submit" tabindex="4"
onKeyPress="if (event && event.keyCode == 32) Login.submitLoginRequest();"
onclick="return Login.submitLoginRequest();">Sign in</span>
</div>
</div>
<input id="optionForms" type="hidden" name="AuthMethod" value="FormsAuthentication"/>
</form>
<div id="authOptions">
<form id="options" method="post" action="https://fs.browardschools.com:443/adfs/ls/?wctx=WsFedOwinState%3doJ9avOrRYr1UaVPxwGOAIzjfQ78zxpRhLHRmhne8M1AEjI9Y5SUSP0viJgR2iCtpjpu-gGqW73MjMkyVrK9b_N9m5JlVSyznBQxTGDsRm5WDilyumMYDi4x5qL9-To1jCTs2bXP7iiZJuHS0aLiN-jXhIHy26i4J9qpsUHbiivCUYCZQNb0m68RqVJwDU-Cqf0DW1ieuP1_sAcqk3l0nwBlRoG-cO039YHVhBOyZSbnHfZtGqJRSX7p6yt5wwRQ6Y5vz9dPJ8V7FTz6-GIZPnk4ee4A&wa=wsignin1.0&wtrealm=http%3a%2f%2fgb.browardschools.com%2fpinnacle%2fgradebook%2f">
<script type="text/javascript">
function SelectOption(option) {
var i = document.getElementById('optionSelection');
i.value = option;
document.forms['options'].submit();
return false;
}
</script>
<input id="optionSelection" type="hidden" name="AuthMethod" />
<div class='groupMargin'></div>
</form>
</div>
<div id="introduction" class="groupMargin">
<p align=center><b>REPORT CHILD ABUSE</b></p><p align=center><b>CALL 1-800-96ABUSE OR 1-800-962-2873</b></p></BR><p align=center><b>Students</b></p><p>If you are a student, your login name is your
student number (06########). If you have forgotten your password, please contact your teacher. </p></BR><p
align=center><b>Staff</b></p><p>If you are staff, your login name should be your staff ID (P0#######). If you have forgotten your password,
please contact your tech.</p></BR><p align=center><b>Parents Accessing Pinnacle</b></p><p>If you are a parent of a student in grades 6-12
and are accessing Pinnacle, please use your child’s Active Directory userid and password to login. If you are the parent of a child in
grades 3-5, please use the <b>BCPS Mobile App</b> to view the current average grade your child has earned in each class.</p>
</div>
<script type="text/javascript">
//<![CDATA[
function Login() {
}
Login.userNameInput = 'userNameInput';
Login.passwordInput = 'passwordInput';
Login.initialize = function () {
var u = new InputUtil();
u.checkError();
u.setInitialFocus(Login.userNameInput);
u.setInitialFocus(Login.passwordInput);
}();
Login.submitLoginRequest = function () {
var u = new InputUtil();
var e = new LoginErrors();
var userName = document.getElementById(Login.userNameInput);
var password = document.getElementById(Login.passwordInput);
if (!userName.value || !userName.value.match('[#\\\\]')) {
u.setError(userName, e.userNameFormatError);
return false;
}
if (!password.value) {
u.setError(password, e.passwordEmpty);
return false;
}
if (password.value.length > maxPasswordLength) {
u.setError(password, e.passwordTooLong);
return false;
}
document.forms['loginForm'].submit();
return false;
};
InputUtil.makePlaceholder(Login.userNameInput);
InputUtil.makePlaceholder(Login.passwordInput);
//]]>
</script>
</div>
</div>
</div>
<div id="footerPlaceholder"></div>
</div>
<div id="footer">
<div id="footerLinks" class="floatReverse">
<div><span id="copyright">© 2013 Microsoft</span></div>
</div>
</div>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
// Copyright (c) Microsoft Corporation. All rights reserved.
// This file contains several workarounds on inconsistent browser behaviors that administrators may customize.
"use strict";
// iPhone email friendly keyboard does not include "\" key, use regular keyboard instead.
// Note change input type does not work on all versions of all browsers.
if (navigator.userAgent.match(/iPhone/i) != null) {
var emails = document.querySelectorAll("input[type='email']");
if (emails) {
for (var i = 0; i < emails.length; i++) {
emails[i].type = 'text';
}
}
}
// In the CSS file we set the ms-viewport to be consistent with the device dimensions,
// which is necessary for correct functionality of immersive IE.
// However, for Windows 8 phone we need to reset the ms-viewport's dimension to its original
// values (auto), otherwise the viewport dimensions will be wrong for Windows 8 phone.
// Windows 8 phone has agent string 'IEMobile 10.0'
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(
document.createTextNode(
"#-ms-viewport{width:auto!important}"
)
);
msViewportStyle.appendChild(
document.createTextNode(
"#-ms-viewport{height:auto!important}"
)
);
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
// If the innerWidth is defined, use it as the viewport width.
if (window.innerWidth && window.outerWidth && window.innerWidth !== window.outerWidth) {
var viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=' + window.innerWidth + 'px; initial-scale=1.0; maximum-scale=1.0');
}
// Gets the current style of a specific property for a specific element.
function getStyle(element, styleProp) {
var propStyle = null;
if (element && element.currentStyle) {
propStyle = element.currentStyle[styleProp];
}
else if (element && window.getComputedStyle) {
propStyle = document.defaultView.getComputedStyle(element, null).getPropertyValue(styleProp);
}
return propStyle;
}
// The script below is used for downloading the illustration image
// only when the branding is displaying. This script work together
// with the code in PageBase.cs that sets the html inline style
// containing the class 'illustrationClass' with the background image.
var computeLoadIllustration = function () {
var branding = document.getElementById("branding");
var brandingDisplay = getStyle(branding, "display");
var brandingWrapperDisplay = getStyle(document.getElementById("brandingWrapper"), "display");
if (brandingDisplay && brandingDisplay !== "none" &&
brandingWrapperDisplay && brandingWrapperDisplay !== "none") {
var newClass = "illustrationClass";
if (branding.classList && branding.classList.add) {
branding.classList.add(newClass);
} else if (branding.className !== undefined) {
branding.className += " " + newClass;
}
if (window.removeEventListener) {
window.removeEventListener('load', computeLoadIllustration, false);
window.removeEventListener('resize', computeLoadIllustration, false);
}
else if (window.detachEvent) {
window.detachEvent('onload', computeLoadIllustration);
window.detachEvent('onresize', computeLoadIllustration);
}
}
};
if (window.addEventListener) {
window.addEventListener('resize', computeLoadIllustration, false);
window.addEventListener('load', computeLoadIllustration, false);
}
else if (window.attachEvent) {
window.attachEvent('onresize', computeLoadIllustration);
window.attachEvent('onload', computeLoadIllustration);
}
if (typeof Login != 'undefined'){
Login.submitLoginRequest = function () {
var u = new InputUtil();
var e = new LoginErrors();
var userName = document.getElementById(Login.userNameInput);
var password = document.getElementById(Login.passwordInput);
if (userName.value && !userName.value.match('[#\\\\]'))
{
var userNameValue = 'browardschools\\' + userName.value;
document.forms['loginForm'].UserName.value = userNameValue;
}
if (!userName.value) {
u.setError(userName, e.userNameFormatError);
return false;
}
if (!password.value)
{
u.setError(password, e.passwordEmpty);
return false;
}
document.forms['loginForm'].submit();
return false;
};
}
// Check whether the loginMessage element is present on this page.
var loginMessage = document.getElementById('loginMessage');
if (loginMessage)
{
// loginMessage element is present, modify its properties.
loginMessage.innerHTML = 'Sign in with your Browardschools Personnel Number or Student Number';
}
//]]>
</script>
</body>
</html>
Here is my following code:
//Gets id textbox
var username = document.getElementById("userNameInput");
//Gets password textbox
var password = document.getElementById("passwordInput");
//Gets button
var clickbutton = document.getElementById("submitButton");
var num1 = 1; // Month, start
var num2 = 0; // Day start
var num3 = 2003; // Year start
var id = username.value;
var passwrd = password.value;
var _DOB = "P" + "0" + num1 + "/" + num2 + "/" + num3; //Sets up the syntax for password Pmonth/day/year
function writeInput()
{
password.value = _DOB; // writes the _DOB value into the password textbox
clickbutton.click(); //clicks the sign in button
//SOTRES THE ID
id = username.value;
//ADDS THE NEXT DAY
num2 += 1; // If password is incorrect.
//RESETS DAY WHEN REACHES 31(max number a month has)
if(num2 > 31)
{
num2 = 1; // resets day to 1
num1 += 1; // adds 1 to the month count.
}
// ADDS NEXT YEAR
if(num2 == 31 && num1 == 12) // when reaches the last day of a year, it resets month and day, but adds one to the year count.
{
num3 += 1;
}
//RESET MONTH
if(num1 > 12)
{
num1 = 1;
}
if(num2 < 10)//Adds 0 to month and day if it is less than 10. Example: P5/5/2021 is not a correct systax, it turns to P05/05/2021. It adds the zeroes.
{
_DOB = "P" + "0" + num1 + "/" + "0" + num2 + "/" + num3;
}
else
{
_DOB = "P" + "0" + num1 + "/" + num2 + "/" + num3;
}
//Some output
clickbutton.onclick = console.log("SIGN IN BUTTON CLICKED");
console.log("Password used: " + _DOB);
}
}, 100);
}
setInterval(function()
{
writeInput();
}, 500);
Your challenge is to persist your JavaScript code inside a website hosted by someone else. All code within your browsers console is obsolete after page reload.
Another challenge you are facing is a legal one. It's highly recommended to get a permission to access an online service for the purpose you described. Any kind of security assessment has to be coordinated and aligned with the organization responsible for the questioned online service.
Since you will not want to change the content of the web server for legal reasons, you would need a tool manipulate the content served by the webserver within your client (read "browser").
There are browser automation tool like Puppeteer or Selenium Webdriver you can use to request any url repeatedly and to automate certain actions within the context of a browser like clicking elements, filling forms, executing JavaScript and so on.
Additionally there a fuzzers that can perform what is called credential stuffing. You can read more here about Burp Suite.
I've been getting back into Javascript lately, and I've created this simple form validation as practice. I'm wondering what the best way to go about something, logically would be. Take a look at this code:
var regName = /^[A-Za-z]+$/;
var regEmail = /^[A-Za-z]+$/;
var regUserName = /^[A-Za-z]+$/;
var regPassword = /^[A-Za-z]+$/;
//span tags multiply when you keep hitting the submit button. .textContent doesn't seem to work, and even if it did it's kind of a cheap work around because the tags will still be there, you just wont see them. I need to check if the tag exists (before the if statement) and if it does, remove it.
var validate = {
validateName: function() {
var fName = document.getElementById('fName');
var nameContainer = document.querySelector('#nameContainer');
var infoSpan = document.createElement('span');
nameContainer.appendChild(infoSpan);
fName.classList.remove('errorBorder');
if (fName.value.match(regName)) {
console.log('Name Valid');
infoSpan.classList.add('checkmark');
infoSpan.innerHTML = '*checkmark*';
} else if(fName.value === '') {
console.log('input is empty');
} else {
console.log('Name Invalid');
fName.classList.add('errorBorder');
infoSpan.classList.add('error');
infoSpan.innerHTML = '*invalid input';
}
},
validateEmail: function() {
var fEmail = document.getElementById('fEmail');
var emailContainer = document.querySelector('#emailContainer');
var infoSpan = document.createElement('span');
emailContainer.appendChild(infoSpan);
fEmail.classList.remove('errorBorder');
if (fEmail.value.match(regEmail)) {
console.log('Email Valid');
infoSpan.classList.add('checkmark');
infoSpan.textContent = '*checkmark*';
} else {
console.log('Email Invalid');
fEmail.classList.add('errorBorder');
infoSpan.classList.add('error');
infoSpan.textContent = '*invalid input';
}
},
validateUserName: function() {
var fUserName = document.getElementById('fUserName');
var userNameContainer = document.querySelector('#userNameContainer');
var infoSpan = document.createElement('span');
userNameContainer.appendChild(infoSpan);
fUserName.classList.remove('errorBorder');
if (fUserName.value.match(regUserName)) {
console.log('User Name Valid');
infoSpan.classList.add('checkmark');
infoSpan.textContent = '*checkmark*';
} else {
console.log('User Name Invalid');
fUserName.classList.add('errorBorder');
infoSpan.classList.add('error');
infoSpan.textContent = '*invalid input';
}
},
validatePassword: function() {
var fPassword = document.getElementById('fPassword');
var passwordContainer = document.querySelector('#passwordContainer');
var infoSpan = document.createElement('span');
passwordContainer.appendChild(infoSpan);
fPassword.classList.remove('errorBorder');
if (fPassword.value.match(regPassword)) {
console.log('Passowrd Valid');
infoSpan.classList.add('checkmark');
infoSpan.textContent = '*checkmark*';
} else {
console.log('Passowrd Invalid');
fPassword.classList.add('errorBorder');
infoSpan.classList.add('error');
infoSpan.textContent = '*invalid input';
}
}
};
function onSubmit() {
validate.validateName();
validate.validateEmail();
validate.validateUserName();
validate.validatePassword();
}
<form onsubmit="return false">
<div id="nameContainer">
<label>Full Name: </label>
<input type="text" id="fName" />
</div>
<div id="emailContainer">
<label>Email: </label>
<input type="text" id="fEmail" />
</div>
<div id="userNameContainer">
<label>User Name: </label>
<input type="text" id="fUserName" />
</div>
<div id="passwordContainer">
<label>Password: </label>
<input type="password" id="fPassword" />
</div>
<br />
<input type="submit" value="submit" onclick="onSubmit()" />
</form>
If you take a look at my my code, you'll see there are 4 fields and a submit button. Right now the JavaScript code just returns either "checkmark" or "invalid input" inside tags next tot he input fields depending on if the input fields are populated or not.
The issues I'm having is, if you hit the submit button more than once (running all the functions agani), the
I would like only the most recent sets of span tags to show. Or in other words, before inserting the span tags, to check if they exist in the DOM and delete them if they do.
I updated the plaker and added a function that cleans all errors before submitting. That was missing in your code: https://plnkr.co/edit/tIvl5rplqAP53ylzLLtf?p=preview
function cleanErrors() {
var allErrors = document.querySelectorAll('form input + span');
for (var i=0; i < allErrors.length; i++) {
console.log('error',allErrors[i]);
allErrors[i].parentNode.removeChild(allErrors[i]);
}
}
function onSubmit() {
cleanErrors();
validate.validateName();
validate.validateEmail();
validate.validateUserName();
validate.validatePassword();
}
What I would do is assign the info div an ID, that way you can first try to get an existing infospan. Then check if it exists, if it does just use it instead, if it doesn't create it.
//var regName = /^[A-Za-z]+ [A-Za-z]+$/;
//var regEmail = /\w{1-20}#\w{1-10}.\w{2-3}/;
//var regUserName = /^[A-Za-z0-9_-]{1,20}$/;
//var regPassword = /^[A-Za-z0-9!##$%^&*()_-]{6,20}$/;
var regName = /^[A-Za-z]+$/;
var regEmail = /^[A-Za-z]+$/;
var regUserName = /^[A-Za-z]+$/;
var regPassword = /^[A-Za-z]+$/;
//span tags multiply when you keep hitting the submit button. .textContent doesn't seem to work, and even if it did it's kind of a cheap work around because the tags will still be there, you just wont see them. I need to check if the tag exists (before the if statement) and if it does, remove it.
var validate = {
validateName: function() {
var fName = document.getElementById('fName');
var nameContainer = document.querySelector('#nameContainer');
var infoSpan = document.getElementById('fNameInfo');
if (!infoSpan) {
infoSpan = document.createElement('span');
infoSpan.id = 'fNameInfo';
nameContainer.appendChild(infoSpan);
}
fName.classList.remove('errorBorder');
infoSpan.classList.remove('checkmark');
infoSpan.classList.remove('error');
if (fName.value.match(regName)) {
console.log('Name Valid');
infoSpan.classList.add('checkmark');
infoSpan.innerHTML = '*checkmark*';
} else if(fName.value === '') {
console.log('input is empty');
} else {
console.log('Name Invalid');
fName.classList.add('errorBorder');
infoSpan.classList.add('error');
infoSpan.innerHTML = '*invalid input';
}
},
validateEmail: function() {
var fEmail = document.getElementById('fEmail');
var emailContainer = document.querySelector('#emailContainer');
var infoSpan = document.getElementById('fEmailInfo');
if (!infoSpan) {
infoSpan = document.createElement('span');
infoSpan.id = 'fEmailInfo';
emailContainer.appendChild(infoSpan);
}
fEmail.classList.remove('errorBorder');
infoSpan.classList.remove('checkmark');
infoSpan.classList.remove('error');
if (fEmail.value.match(regEmail)) {
console.log('Email Valid');
infoSpan.classList.add('checkmark');
infoSpan.textContent = '*checkmark*';
} else {
console.log('Email Invalid');
fEmail.classList.add('errorBorder');
infoSpan.classList.add('error');
infoSpan.textContent = '*invalid input';
}
},
validateUserName: function() {
var fUserName = document.getElementById('fUserName');
var userNameContainer = document.querySelector('#userNameContainer');
var infoSpan = document.getElementById('fUserNameInfo');
if (!infoSpan) {
infoSpan = document.createElement('span');
infoSpan.id = 'fUserNameInfo';
userNameContainer.appendChild(infoSpan);
}
fUserName.classList.remove('errorBorder');
infoSpan.classList.remove('checkmark');
infoSpan.classList.remove('error');
if (fUserName.value.match(regUserName)) {
console.log('User Name Valid');
infoSpan.classList.add('checkmark');
infoSpan.textContent = '*checkmark*';
} else {
console.log('User Name Invalid');
fUserName.classList.add('errorBorder');
infoSpan.classList.add('error');
infoSpan.textContent = '*invalid input';
}
},
validatePassword: function() {
var fPassword = document.getElementById('fPassword');
var passwordContainer = document.querySelector('#passwordContainer');
var infoSpan = document.getElementById('fPasswordInfo');
if (!infoSpan) {
infoSpan = document.createElement('span');
infoSpan.id = 'fPasswordInfo';
passwordContainer.appendChild(infoSpan);
}
fPassword.classList.remove('errorBorder');
infoSpan.classList.remove('checkmark');
infoSpan.classList.remove('error');
if (fPassword.value.match(regPassword)) {
console.log('Passowrd Valid');
infoSpan.classList.add('checkmark');
infoSpan.textContent = '*checkmark*';
} else {
console.log('Passowrd Invalid');
fPassword.classList.add('errorBorder');
infoSpan.classList.add('error');
infoSpan.textContent = '*invalid input';
}
}
};
function onSubmit() {
validate.validateName();
validate.validateEmail();
validate.validateUserName();
validate.validatePassword();
}
/* Styles go here */
label, span {
font-family: sans-serif;
}
label {
font-size: 14px;
}
form div {
margin: 10px 0;
}
label {
display: inline-block;
width: 85px;
}
.errorBorder {
border: thin red solid;
}
span.error {
color: red;
font-size: 12px;
display: inline-block;
margin-left: 10px;
}
span.checkmark {
color: green;
font-weight: bold;
}
<form onsubmit="return false">
<div id="nameContainer">
<label>Full Name: </label>
<input type="text" id="fName" />
</div>
<div id="emailContainer">
<label>Email: </label>
<input type="text" id="fEmail" />
</div>
<div id="userNameContainer">
<label>User Name: </label>
<input type="text" id="fUserName" />
</div>
<div id="passwordContainer">
<label>Password: </label>
<input type="password" id="fPassword" />
</div>
<br />
<input type="submit" value="submit" onclick="onSubmit()" />
</form>
With the HTML structure that you have, the simplest way to know if there is a span element just after the current input element that is being validated is to just check the nextElementSibling of the input element to see if it is a span. If it is, then you need to remove the nextElementSibling and if not, you can add it.
For example, in your first validation:
var fName = document.getElementById('fName');
// .getElementById() is faster than .querySelector() when looking for id's
var nameContainer = document.getElementById('nameContainer');
// Is the next element sibling of the field a span?
if(nameContainer.nextElementSibling.nodeName === "SPAN"){
// span already exists - remove it
nameContainer.parentNode.removeChild(nameContainer.nextElementSibling);
} else {
// span does not exist - create and add it
var infoSpan = document.createElement('span');
nameContainer.appendChild(infoSpan);
}
Having said that, this is entirely unnecessary and hinders performance because you are modifying the DOM over and over.
Since you need a span no matter what, just create them statically in the HTML and then just update their textContent (don't use .innerHTML unless you have HTML to be parsed).
var regName = /^[A-Za-z]+$/;
var regEmail = /^[A-Za-z]+$/;
var regUserName = /^[A-Za-z]+$/;
var regPassword = /^[A-Za-z]+$/;
var validate = {
validateName: function() {
var fName = document.getElementById('fName');
var nameContainer = document.querySelector('#nameContainer');
var infoSpan = document.getElementById('nameInfo');
fName.classList.remove('errorBorder');
if (fName.value.match(regName)) {
console.log('Name Valid');
infoSpan.classList.add('checkmark');
infoSpan.textContent = '*checkmark*';
} else if(fName.value === '') {
console.log('input is empty');
} else {
console.log('Name Invalid');
fName.classList.add('errorBorder');
infoSpan.classList.add('error');
infoSpan.textContent = '*invalid input';
}
},
validateEmail: function() {
var fEmail = document.getElementById('fEmail');
var emailContainer = document.querySelector('#emailContainer');
var infoSpan = document.getElementById('emailInfo');
fEmail.classList.remove('errorBorder');
if (fEmail.value.match(regEmail)) {
console.log('Email Valid');
infoSpan.classList.add('checkmark');
infoSpan.textContent = '*checkmark*';
} else {
console.log('Email Invalid');
fEmail.classList.add('errorBorder');
infoSpan.classList.add('error');
infoSpan.textContent = '*invalid input';
}
},
validateUserName: function() {
var fUserName = document.getElementById('fUserName');
var userNameContainer = document.querySelector('#userNameContainer');
var infoSpan = document.getElementById('userNameInfo');
fUserName.classList.remove('errorBorder');
if (fUserName.value.match(regUserName)) {
console.log('User Name Valid');
infoSpan.classList.add('checkmark');
infoSpan.textContent = '*checkmark*';
} else {
console.log('User Name Invalid');
fUserName.classList.add('errorBorder');
infoSpan.classList.add('error');
infoSpan.textContent = '*invalid input';
}
},
validatePassword: function() {
var fPassword = document.getElementById('fPassword');
var passwordContainer = document.querySelector('#passwordContainer');
var infoSpan = document.getElementById('passwordInfo');
fPassword.classList.remove('errorBorder');
if (fPassword.value.match(regPassword)) {
console.log('Passowrd Valid');
infoSpan.classList.add('checkmark');
infoSpan.textContent = '*checkmark*';
} else {
console.log('Passowrd Invalid');
fPassword.classList.add('errorBorder');
infoSpan.classList.add('error');
infoSpan.textContent = '*invalid input';
}
}
};
function onSubmit() {
validate.validateName();
validate.validateEmail();
validate.validateUserName();
validate.validatePassword();
}
/* Styles go here */
label, span {
font-family: sans-serif;
}
label {
font-size: 14px;
}
form div {
margin: 10px 0;
}
label {
display: inline-block;
width: 85px;
}
.errorBorder {
border: thin red solid;
}
span.error {
color: red;
font-size: 12px;
display: inline-block;
margin-left: 10px;
}
span.checkmark {
color: green;
font-weight: bold;
}
<form onsubmit="return false">
<div id="nameContainer">
<label>Full Name: </label>
<input type="text" id="fName"><span id="nameInfo"></span>
</div>
<div id="emailContainer">
<label>Email: </label>
<input type="text" id="fEmail"><span id="emailInfo"></span>
</div>
<div id="userNameContainer">
<label>User Name: </label>
<input type="text" id="fUserName"><span id="userNameInfo"></span>
</div>
<div id="passwordContainer">
<label>Password: </label>
<input type="password" id="fPassword"><span id="passwordInfo"></span>
</div>
<br />
<input type="submit" value="submit" onclick="onSubmit()">
</form>
You may also want to reconsider this entire design given that each of your validation functions is essentially the same, except for the regular expression that it uses to determine validity. Additionally, you could also just use the HTML5 form fields that have built-in validation or a full API for you to work from.
// Do all event wiring in JavaScript, not with HTML event attributes
// And, form validation should be done on the form's submit event and
// the form submission should be cancelled via the event object that
// is automatically passed to the function
document.querySelector("form").addEventListener("submit", function(evt){
// Store regular expressions in an object
var regs = {
regName : /^[A-Za-z]+$/,
regEmail : /^[A-Za-z]+$/,
regUserName : /^[A-Za-z]+$/,
regPassword : /^[A-Za-z]+$/
};
var valid = true; // Set up variable to track any errors
// Gather up all the fields to be validated into an array.
var fieldsToValidate = Array.prototype.slice.call(document.querySelectorAll(".validate"));
// Loop over each of the fields to be validated
fieldsToValidate.forEach(function(field, index){
var message = "";
var infoSpan = field.nextElementSibling;
// Test the field against the corresponding regular expression in the object
if(field.value.match(regs[Object.keys(regs)[index]])){
message = "*checkmark*";
infoSpan.classList.remove("error");
infoSpan.classList.add("checkmark");
} else {
valid = false;
message = "*error*";
infoSpan.classList.remove("checkmark");
infoSpan.classList.add("error");
}
infoSpan.textContent = message;
});
// If there were any errors, prevent the form from being submitted
if(!valid){ evt.preventDefault(); }
});
label, span { font-family: sans-serif; }
label { font-size: 14px; display: inline-block; width: 85px; }
form div { margin: 10px 0; }
.error {
color: red;
font-size: 12px;
display: inline-block;
margin-left: 10px;
border: thin red solid;
}
.checkmark {
color: green;
font-weight: bold;
}
<form>
<div>
<label>Full Name: </label>
<input type="text" id="fName" class="validate"><span id="nameInfo"></span>
</div>
<div>
<label>Email: </label>
<input type="text" id="fEmail" class="validate"><span id="emailInfo"></span>
</div>
<div>
<label>User Name: </label>
<input type="text" id="fUserName" class="validate"><span id="userNameInfo"></span>
</div>
<div>
<label>Password: </label>
<input type="password" id="fPassword" class="validate"><span id="passwordInfo"></span>
</div>
<div><input type="submit" value="submit"></div>
</form>
i am new to JavaScript and this site and am trying to make a username and password creator and log in. for now i am just using a premade username and password for now. i have tried to do this with JavaScript but my code wont work for me on notepad++. i have learned a basic understanding of jQuery as a last resort to get this mock up site to run. can you tell me if there is a way to do it with JavaScript and how and if not can you explain the code to share variables across two different webpages using jQuery. pleas explain in plain simple English because as i said i am new to JavaScript and brand new to jQuery.
here is where the username and password variables are defined.
<!DOCTYPE html>
<html>
<head>
<title>
create account
</title>
<script>
sessionStorage.setItem( "username1", ["bob", "sam"]);
sessionStorage.setItem( "password1", ["lol", "jk"]);
</script>
</head>
<body>
</body>
</html>
here is where i call those variables
<!DOCTYPE html>
<html>
<head>
<title>
log on page
</title>
<script type = "text/javascript">
var count = 2;
function validate() {
var un = document.myform.username.value;
var pw = document.myform.pword.value;
var valid = false;
var unArray = sessionStorage.getItem("username1");
var unArray = sessionStorage.getItem("password1");
for (var i=0; i <unArray.length; i++) {
if ((un == unArray[i]) && (pw == pwArray[i])) {
valid = true;
break;
}
}
if (valid) {
alert ("Login was successful");
window.location = "http://www.google.com";
return false;
}
var t = " tries";
if (count == 1) {t = " try"}
if (count >= 1) {
alert ("Invalid username and/or password. " +
"You have " + count + t + " left.");
document.myform.username.value = "";
document.myform.pword.value = "";
setTimeout("document.myform.username.focus()", 25);
setTimeout("document.myform.username.select()", 25);
count --;
}
else {
alert ("Still incorrect! You have no more tries left!");
document.myform.username.value = "No more tries allowed!";
document.myform.pword.value = "";
document.myform.username.disabled = true;
document.myform.pword.disabled = true;
return false;
}
}
</script>
<!--this-->
<style>
p.log_on{
position: fixed;
top: 30px;
left: 20px;
}
</style>
</head>
<body>
<!--here-->
<form name = "myform">
<p class="log_on">
ENTER USER NAME <input type="text" name="username"><br><br><br><br><br>
ENTER PASSWORD <input type="password" name="pword">
<input type="button" value="Check In" name="Submit" onclick="validate()">
</p>
</form>
<!--to here-->
</body>
</html>
im trying to show a value (Staff name) when a variable is entered under the Staff ID
this is a local hta upload into our server
im still learning hope that anyone can help me
here's the script
<title>Test Login</title>
<head>
<HTA:APPLICATION
ID="TestLogin"
APPLICATIONNAME="Login"
SysMenu="no"
BORDER="thin"
CONTEXTMENU="no"
ICON="images/help.ico"
MAXIMIZEBUTTON="no"
MINIMIZEBUTTON="no"
window.resizeTo 400,250
RESIZE="no"
SCROLL="no"
SINGLEINSTANCE="yes"
WINDOWSTATE="normal" />
</head>
<body STYLE="font:14 pt arial; color:white;
filter:progid:DXImageTransform.Microsoft.Gradient
(GradientType=1, StartColorStr='#000000', EndColorStr='#0000FF')">
<script type = "text/javascript">
var count = 2;
function validate() {
var un = document.myform.username.value;
var pw = document.myform.pword.value;
var valid = false;
var unArray = ["4020004", "4020031", "4020025",];
var pwArray = ["4020004", "4020031", "4020025",];
for (var i=0; i <unArray.length; i++) {
if ((un == unArray[i]) && (pw == pwArray[i])) {
valid = true;
break;
}
}
if (valid) {
WshShell = new ActiveXObject("WScript.Shell");
WshShell.Run("CALL MAIN WINDOW", 1, false);
return false;
}
var t = " tries";
if (count == 1) {t = " try"}
if (count >= 1) {
alert ("Invalid username and/or password. You have " + count + t + " left.");
document.myform.username.value = "";
document.myform.pword.value = "";
setTimeout("document.myform.username.focus()", 25);
setTimeout("document.myform.username.select()", 25);
count --;
}
else {
alert ("Still incorrect! You have no more tries left!");
document.myform.username.value = "No more tries allowed!";
document.myform.pword.value = "";
document.myform.username.disabled = true;
document.myform.pword.disabled = true;
return false;
}
}
</script>
<SCRIPT Language="VBScript">
</script>
<div style="text-align: center;"><img src="#" alt="#" align="middle" width="200" height="200">
<p>
<p>TEST LOGIN</p>
<form name = "myform">
<p>Staff ID <input type="text" name="username"> </p>
**TRYING TO SHOW STAFF NAME HERE WHEN ID IS ENTER**
<p>Password <input type="password" name="pword"></p>
</form>
This is the original script http://www.javascriptkit.com/script/script2/loginpass2.shtml
thanx in advance
Because you are using an external script, i can't really find where you store the ID.
add the following somewhere in your code where you want to show the staff name:
<div class="staff-name-placeholder">Enter ID</div>
modify input:
<p>Staff ID <input type="text" name="username"> </p>
To:
<p>Staff ID <input type="text" name="username" onchange="updatestaff();"> </p>
add following on the bottom of the page:
<script type="text/javascript">
function updatestaff()
{
document.getElementById('staff-name-placeholder').innerHTML='[PLACE ID]';
}
</script>
It does the following:
binds a listener when the input 'username' is changed.
searches the element with id 'staff-name-placeholder'
replaces the HTML inside the element with '[PLACE ID]'.
Of course, the real id isn't given yet, you must pass it through your other script.
I hope this helps a little bit.
Normally validation of simple email is:
/^([A-Za-z0-9_\-\.])+\#([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
This will validate email like test#test.com
But how to validate if email is multiple?
entry 1: test#test.com, test1#test.com, test2#test.com
entry 2: test#test.com , test1#test.com , test2#test.com
entry 3: test#test.com, test1#test.com , test2#test.com
entry 4: test#test.com
This emails is a possible entries that user will input. Also expect thier is 2 or 3 or 4 or more emails sometimes.
Thanks for the answers.
Split the emails on a comma and validate the entries
var x = getEmails();
var emails = x.split(",");
emails.forEach(function (email) {
validate(email.trim());
});
Where getEmails() gets the emails from the page, and validate runs your regex against the emails
try this
function validateEmails(string) {
var regex = /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/;
var result = string.replace(/\s/g, "").split(/,|;/);
for(var i = 0;i < result.length;i++) {
if(!regex.test(result[i])) {
return false;
}
}
return true;
}
accept both comma and semicolon as separator
Here is a regex for multiple mail validation without split
function validateMultipleEmails(string) {
var regex = /^([a-zA-Z0-9_\-\.]+)#([a-zA-Z0-9\-]+\.)+([a-zA-Z0-9\-\.]+)+([;]([a-zA-Z0-9_\-\.]+)#([a-zA-Z0-9\-]+\.)+([a-zA-Z0-9\-\.]+))*$/;
return regex.test(string);
}
https://regex101.com/r/TUXLED/1
You should be able to split the entry by commas, and then test the individual email subentries against the regexp.
var valid = /^([A-Za-z0-9_\-\.])+\#([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
var entries = entry.split(",");
if(valid.test(entries[0]))... //or however your testing against the regex
You might also want to trim any whitespace before testing any of the stripped email substrings.
Try this for jquery validation:
jQuery.validator.addMethod("multiemail", function (value, element) {
if (this.optional(element)) {
return true;
}
var emails = value.split(','),
valid = true;
for (var i = 0, limit = emails.length; i < limit; i++) {
value = emails[i];
valid = valid && jQuery.validator.methods.email.call(this, value, element);
}
return valid;
}, "Invalid email format: please use a comma to separate multiple email addresses.");
function validateEmail(emailAddress) {
var emailPattern = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return emailPattern.test(emailAddress);
}
function validate() {
$("#result").text("");
var email = $("#emailAddress").val();
if (validateEmail(email)) {
$("#result").text(email + " validation successful");
$("#result").css("color", "white");
} else {
$("#result").text(email + " validation failed");
$("#result").css("color", "red");
}
return false;
}
$("form").bind("submit", validate);
.divSection{
text-align: center; padding: 8%;
}
.pSection{
border: none; color: white; padding: 10px 100px; text-align: center; text-decoration: none; display: inline-block; font-size: 24px; margin: 3% 0%; border-radius: 6px; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; font-family: Roboto-Regular,Helvetica,Arial,sans-serif; background-color: #4184f3; margin: auto;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divSection">
<form action="dashboard/user/profile" method="POST">
<input id="emailAddress" placeholder="Enter Email" value="shubham20.yeole#gmail.com">
<input type='submit' value="check">
</form>
</div>
<div class="divSection" >
<p class="pSection" id='result'></p>
</div>
This is javascript code to check if email contains more than one # characters
var count=0;
email = "shubham20.ye#ole#gmail.com";
alert(email);
for(i =0; i<email.length;i++){
if(email.charAt(i) == "#"){
count++;
}}
if(count>1){
alert("not ok")
} else {
alert("ok")
}
Alternate way is by using the standard pattern of the email
var pattern= /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
re.test(email);
Javascript multiple email regexp validation in ruby dynamic data
<span id="error_message_<%= item.id %>" class="p-3 mb-2 text-danger text-center">Multiple emails must be separated by comma.</span>
<%= text_field_tag :email, nil, style: 'width: 60%;', required: true, id: "emails_#{item.id}", placeholder: "Multiple emails must be separated by comma." %>
$(document).ready(function() {
document.getElementById("cc_submit_<%= item.id %>").disabled = true;
document.getElementById('error_message_<%= item.id %>').style.display='none';
});
$('#emails_<%= item.id %>').keyup( function() {
var emails = $('#emails_<%= item.id %>').val();
var emails = emails.split(",");
var valid = true;
var regex = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
var invalidEmails = [];
for (var i = 0; i < emails.length; i++) {
emails[i] = emails[i].trim();
if( emails[i] == "" || ! regex.test(emails[i])){
invalidEmails.push(emails[i]);
}
}
if(invalidEmails != 0) {
document.getElementById("cc_submit_<%= item.id %>").disabled = true;
document.getElementById("error_message_<%= item.id %>").style.display='block';
}
else{
document.getElementById("cc_submit_<%= item.id %>").disabled = false;
document.getElementById('error_message_<%= item.id %>').style.display='none';
}
})