Develop Reference

JQuery addClass working in a very odd manner

I have a form with 3 inputs: 2 text inputs for a Username and E-mail and a third password input for, you guessed it, a password.
I'm validating these input fields in JQuery and when an input is either empty or doesn't match it's format, it adds a class to the input with a red border. The code goes as follows:
if ($("input#username").val().length < 6) {
$("input#username").addClass('input-error');
next_step = false;
} else if (!isEmail($("#email").val())) {
$("#email").addClass('input-error');
next_step = false;
} else if (!isPassword($("#pwd").val())) {
$("#pwd").addClass('input-error');
next_step = false;
}
else {
$(this).removeClass('input-error');
next_step = true;
}
It works perfectly with both Username and E-mail fields, and it also works if the Password field is empty, but even though it validates perfectly, the addClass() doesn't work if the Password doesn't meet it's requirements (At least one Uppercase letter and one number).
This is what the browser console shows:
As you can see, it kind of adds the class, but then not really.
What is happening? If you need the HTML code and/or the CSS code, tell me!
Thanks for your attention!
EDIT
Here is the HTML and CSS as requested:
<fieldset>
<div class="form-bottom">
<img src="img/gbsnlogo.svg" alt="GBSN Research" name="GBSN Research" width="50%" class="signupLogo" />
<br>
<br>
<br>
<div class="form-group">
<label for="username"><h1>USERNAME:</h1></label>
<input type="text" class="form-control" id="username" placeholder="Enter username..." name="username">
</div>
<div class="form-group">
<label for="email"><h1>E-MAIL:</h1></label>
<input type="text" class="form-control" id="email" placeholder="Enter e-mail..." name="email">
</div>
<div class="form-group">
<label for="pwd"><h1>PASSWORD:</h1></label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password..." name="pwd">
</div>
<div class="text-center">
<button type="button" class="btn-next btn-nav"><h1>NEXT</h1></button>
</div>
</div>
</fieldset>
and the CSS:
.form-control {
height: 40px;
border: 2px solid black;
border-radius: 0;
font-size: 14px;
}
.form-control:focus {
border: 2px solid black;
box-shadow: 0;
}
.input-error {
border-color: #FF2859;
}

This is working for me.
Please comment what is still not working if you have this kind of setup?
function isEmail(email) { // dummy example
return email.indexOf("#")>1;
}
function isPassword(passwd) { // dummy example
return passwd.indexOf("x")>=0; // must contain x
}
$(function() {
$(".btn-next").on("click", function() {
$(".form-group input").removeClass('input-error');
var next_step = true,
user = $("#username").val(),
email = $("#email").val(),
pwd=$("#pwd").val();
if (user.length < 6) {
$("#username").addClass('input-error');
next_step = false;
} else if (!isEmail(email)) {
$("#email").addClass('input-error');
next_step = false;
} else if (!isPassword(pwd)) {
$("#pwd").addClass('input-error');
next_step = false;
}
console.log(next_step);
});
});
.form-control {
height: 40px;
border: 2px solid black;
border-radius: 0;
font-size: 14px;
}
.form-control:focus {
border: 2px solid black;
box-shadow: 0;
}
.input-error {
border-color: #FF2859;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<fieldset>
<div class="form-bottom">
<img src="img/gbsnlogo.svg" alt="GBSN Research" name="GBSN Research" width="50%" class="signupLogo" />
<br>
<br>
<br>
<div class="form-group">
<label for="username"><h1>USERNAME:</h1></label>
<input type="text" class="form-control" id="username" placeholder="Enter username..." name="username">
</div>
<div class="form-group">
<label for="email"><h1>E-MAIL:</h1></label>
<input type="text" class="form-control" id="email" placeholder="Enter e-mail..." name="email">
</div>
<div class="form-group">
<label for="pwd"><h1>PASSWORD:</h1></label>
<input type="text" class="form-control" id="pwd" placeholder="Enter password..." name="pwd">
</div>
<div class="text-center">
<button type="button" class="btn-next btn-nav"><h1>NEXT</h1></button>
</div>
</div>
</fieldset>

From what I see from the image you posted
I can only speculate this is what happened.
The line [input#pwd.form-control.input-error] was evaluated immediately when it got printed to the console. So that mean at that time, the dom does have the class input error in it. However, when you expand it, the dom got re-evaluated again. And at that time, the dom's class input-error got removed, so you don't see it anymore. I was able to prove this by running $('#pwd').addClass('input-error') and $('#pwd').removeClass('input-error') in that order, image below
Based on that, I suspect you have another logic in the code that remove the class shortly after you have added the class to the dom, highly possibly $(this).removeClass('input-error');.

onclick validation not stopping POST to MVC controller

I am trying to integrate a realex payment API and have used the example found on https://developer.realexpayments.com/#!/integration-api/3d-secure/java/html_js#3dsecurity-accordion and as part of this I have set up the following page:
<!DOCTYPE html>
<html>
<head>
<title>Basic Validation Example</title>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/rxp-js.js"></script> <!-- Available at https://github.com/realexpayments -->
<!-- Basic form styling given as an example -->
<style type="text/css">
label {
display: block;
font-size: 12px;
font-family: arial;
}
input {
width: 200px;
}
input.small {
width: 50px;
}
.twoColumn {
float: left;
margin: 0 30px 20px 0;
}
.clearAll {
clear: both;
}
</style>
</head>
<body>
<!-- Basic HTML form given as an example -->
<form name="myForm" method="POST" autocomplete="off" action="securepayment">
<p>
<label for="cardNumber">Card Number</label>
<input type="text" id="cardNumber" name="card-number" />
</p>
<p>
<label for="cardholderName">Cardholder Name</label>
<input type="text" id="cardholderName" name="cardholder-name" />
</p>
<p class="twoColumn">
<label>Expiry Date</label>
<input type="text" id="expiryDateMM" name="expiry-date-mm" aria-label="expiry date month" placeholder="MM" class="small" />
<input type="text" id="expiryDateYY" name="expiry-date-yy" aria-label="expiry date year" placeholder="YY" class="small" />
</p>
<p class="twoColumn">
<label for="cvn">Security Code</label>
<input type="text" id="cvn" name="cvn" class="small" />
</p>
<p class="clearAll">
<input value="Pay Now" type="submit" name="submit" onclick="validate();" />
</p>
</form>
<script>
// Basic form validation using the Realex Payments JS SDK given as an example
function validate() {
alert("VALIDATE HIT !!!!")
var cardNumberCheck = RealexRemote.validateCardNumber(document.getElementById('cardNumber').value);
var cardHolderNameCheck = RealexRemote.validateCardHolderName(document.getElementById('cardholderName').value);
var expiryDate = document.getElementById('expiryDateMM').value.concat(document.getElementById('expiryDateYY').value) ;
var expiryDateFormatCheck = RealexRemote.validateExpiryDateFormat(expiryDate);
var expiryDatePastCheck = RealexRemote.validateExpiryDateNotInPast(expiryDate);
if ( document.getElementById('cardNumber').value.charAt(0) == "3" ) { cvnCheck = RealexRemote.validateAmexCvn(document.getElementById('cvn').value);}
else { cvnCheck = RealexRemote.validateCvn(document.getElementById('cvn').value); }
if (cardNumberCheck == false || cardHolderNameCheck == false || expiryDateFormatCheck == false || expiryDatePastCheck == false || cvnCheck == false)
{
// code here to inform the cardholder of an input error and prevent the form submitting
if (cardNumberCheck == false) { alert("CARD IS FALSE") }
if (cardHolderNameCheck == false) { alert("CARD HOLDER NAME IS FALSE") }
if (expiryDateFormatCheck == false) { alert("EXPIRY DATE FORMAT IS FALSE") }
if (expiryDatePastCheck == false) { alert("EXPIRY DATE IS IN THE PAST") }
if (cvnCheck == false) { alert("CVN IS FALSE") }
return false;
}
else
return true;
}
</script>
</body>
</html>
Despite ensuring that the javascript is working as expected I have checked to see that the appropriate validation messages are being displayed in alerts which they are however the post to the controller is never cancelled despite the onclick() event resulting in a return false
Can anyone see why this is happening or am I doing something wrong?

Try changing your onclick event handler from onclick="validate();" to onclick="return validate();" that will fix this issue.
Hope this helps!.

JavaScript Form Validation not Working -- Check Character Count on Entry

My HTML:
<html>
<head>
<title>Js</title>
<link href="js1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="box">
<form action="action.php">
<label>Enter Name
<input id="Username" type="text" name="Enter Username" />
</label>
<div id="feedback"></div>
<label id="pass">Password
<input id="pass" type="password" name="Enter Passkey" />
</label>
<input type="submit" value="sign up" />
</form>
</div>
<script src="js1.js"></script>
</body>
</html>
My JavaScript:
function checkUsername() { // Declare function
var elMsg = document.getElementById('feedback'); // Get feedback element
if (this.value.length < 5) { // If username too short
elMsg.textContent = 'Username must be 5 characters or more'; // Set msg
} else { // Otherwise
elMsg.textContent = ''; // Clear message
}
}
var elUsername = document.getElementById('Username'); // Get-name input
elUsername.onBlur = checkUsername; // loses focus call checkuserName()
My CSS:
body{
background-color:black;
}
#box{
background-color:silver;
height:600px;
width:600px;
margin-left:300px;
}
p{
color:white;
font-size:18;
}
form{
padding:20px;
width:96px;
}
input[type="text"] , input[type="password"]
{
background-color:#999;
border:2px solid white;
}
input[type="text"]:focus , input[type="password"]:focus
{
background-color:#fff
}
What the program is supposed to do :
Once the user is done entering the UserName, the function must check if it has atleast 5 characters else display a msg in place of "feedback"?
What am I missing?

You have a typo in this line
var elUsername = document.getElementById('username')
The id of the input is uppercase Username
try:
var elUsername = document.getElementById('Username')
And another more important typo onBlur event in elUsername.onBlur = checkUsername should be onblur all lowercase.
Here is a working Example

Trigger Similar JQuery element on different span element

So ideally what I want to have happen is trigger an identical function that I already have in my email span/form element, however I'm new to JQuery and can't quite wrap my head around it. Anyways, so in my email function, it essentially grabs the user input and and triggers the css class "form span error" which turns the span element red. Until the user inputs the "#" symbol, the "form span valid" is triggered. I would additionally like JQuery to trigger the "form span.error" rule on the productId forum/span element. Could please someone explain? Here's the CSS rule for the span:
#form span {
border-radius: 20px;
margin-left:15px;
padding: 8px 35px;
background: #FA5700;
color:#faf3bc;
}
#form span.valid {
background-color :#c0ce51;
color: #faf3bc;
}
#form span.error {
background-color:#b0240f;
color: #faf3bc;
}
HTML/JQUERY:
<form method="post" action="contact-thanks.php">
<p>
<label for="name">Name:</label>
<input type="text" name="name" id="name" class="required" value="<?php if (isset($name)) { echo htmlspecialchars($name); } ?>">
<span>Please enter your name</span>
</p>
<p>
<label for="email">Email:</label>
<input type="text" name="email" id="email" class="required" value="<?php if(isset($email)) { echo htmlspecialchars($email); } ?>">
<span>Please enter a valid email address</span>
</p>
<p>
<label for="productId">Product Id:</label>
<input type="text" name="productId" id="productId" class="required" value="<?php if(isset($productId)) { echo htmlspecialchars($productId); } ?>">
<span>Please enter a ID number</span>
</p>
<p class="submit">
<input type="submit" value="Submit" class="btn-submit">
</p>
</form>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var $submit = $(".submit input");
var $required = $(".required");
function containsBlanks(){
var blanks = $required.map(function(){ return $(this).val() == "";});
return $.inArray(true, blanks) != -1;
}
//Checks for valid email
function isValidEmail(email){
return email.indexOf("#") != -1;
}
//Does not let the user submit if all text fields are not filled in
function requiredFilledIn(){
if(containsBlanks() || !isValidEmail($("#email").val()))
$submit.attr("disabled","disabled");
else
$submit.removeAttr("disabled");
}
//Here's what I've tried, I'm playing around with it here for testing purposes
//I'm afraid this syntax is terribly wrong
$("#productId").focus(function(){
$(this).next().removeClass("valid").addClass("error");
});
$("#form span").hide();
$("input,textarea").focus(function(){
$(this).next().fadeIn("slow");
}).blur(function(){
$(this).next().fadeOut("slow");
}).keyup(function(){
//Check all required fields.
requiredFilledIn();
});
$("#email").keyup(function(){
//Check for a valid email.
if(isValidEmail($(this).val()))
$(this).next().removeClass("error").addClass("valid");
else
$(this).next().removeClass("valid").addClass("error");
});
requiredFilledIn();
</script>
Appreciate any help ahead of time!

After some simple experimenting, I figured it out. Here's the code if anyone is curious:
$("#productId").show(function(){
$(this).next().fadeIn("slow").removeClass("valid").addClass("error");
});

can i write a text over hidden text and if the hidden text is visible by javascript my text will move right to hidden text ..which is visible now..?

I am developing a website for a company and the company wants that the user first should fill all the information and he should proceed then...
For that I made a form with this code:
<form action="Owners Infoback.php" onsubmit="return validateForm()" method="post" name="enquiry" id="" class="form-body-02">
<ul>
<li style="overflow:hidden;">
<label for="Name" class="l1">1. Name of owner:<br />
<p>(If more than one seperate using comma.</br> Eg. A,B,C )<br /></p></label>
<div id="nameOfOwnerError" style="visibility:hidden;color:red; display:inline; margin-left:20px;">*</div>
<input name="Name_of_owner" type="text" class="textarea-bk-02" id="" value="<?php echo "{$row[0]}";?>" style="border:none; width:330px; margin-left:14px; margin-top:15px; height:20px;"/>
</li>
<li>
<label for="Name" class="l1">2. Name of company:<br /><p>(Enter name registered)</p></label>
<div id="nameOfOwnerCompany" style="visibility:hidden;color:red; display:inline; margin-left:20px;">*</div>
<input name="Name_of_company_registered" type="text" class="textarea-bk-02" id="" value="<?php echo "{$row[1]}";?>" style="border:none; width:330px; margin-left:10px; margin-top:13px; height:20px;"/>
</li>
<li>
<label for="Name" class="l1">3. Address:<p>(Write your own manufacturer address)</p></label>
<div id="nameOfOwnerAddress"style="visibility:hidden;color:red; display:inline; margin-left:20px;">*</div>
<input name="Owner_address" type="text" class="textarea-bk-02" id="" value="<?php echo "{$row[2]}";?>" style="border:none; width:330px; height:20px; margin-left:13px; margin-top:13px;"/>
</li>
<li>
<label for="Name" class="l1">4. Email id:<p></p></label>
<div id="nameOfOwnerEmail" style="visibility:hidden;color:red; display:inline; margin-left:20px;">*</div>
<input name="Owner_Email_id" type="text" class="textarea-bk-02" id="" value="<?php echo "{$row[3]}";?>" style="border:none; width:330px; margin-left:13px; margin-top:13px; height:20px;"/>
</li>
<li>
<div id="nameOfOwnerError1" style="visibility:hidden;color:red; display:inline; position:relative"> Name of owner,</div>
<div id="nameOfOwnerCompany1" style="visibility:hidden;color:red; display:inline; position:relative"> Name of company,</div>
<div id="nameOfOwnerAddress1" style="visibility:hidden;color:red; display:inline; position:relative"> Address,</div>
<div id="nameOfOwnerEmail1" style="visibility:hidden;color:red; display:inline; position:relative"> valid Email id</div>
<input name="Save" type="submit" class="send-btns-02 right" value="save" style="margin-top:5px;" >
<div class="clear"></div>
</li>
</ul>
</form>
and in the header part, i wrote javascript as:-
<script>
function validateForm()
{
var y=true;
var x=document.forms["enquiry"]["Name_of_owner"].value;
if (x==null || x=="")
{
document.getElementById("nameOfOwnerError").style.visibility="visible";
document.getElementById("nameOfOwnerError1").style.visibility="visible";
y= false;
}
else
{ document.getElementById("nameOfOwnerError").style.visibility="hidden";
document.getElementById("nameOfOwnerError1").style.visibility="hidden";
}
x=document.forms["enquiry"]["Name_of_company_registered"].value;
if (x==null || x=="")
{
document.getElementById("nameOfOwnerCompany").style.visibility="visible";
document.getElementById("nameOfOwnerCompany1").style.visibility="visible";
y= false;
}
else
{document.getElementById("nameOfOwnerCompany").style.visibility="hidden";
document.getElementById("nameOfOwnerCompany1").style.visibility="hidden";
}
x=document.forms["enquiry"]["Owner_address"].value;
if (x==null || x=="")
{
document.getElementById("nameOfOwnerAddress").style.visibility="visible";
document.getElementById("nameOfOwnerAddress1").style.visibility="visible";
y= false;
}
else
{document.getElementById("nameOfOwnerAddress").style.visibility="hidden";
document.getElementById("nameOfOwnerAddress1").style.visibility="hidden";
}
x=document.forms["enquiry"]["Owner_Email_id"].value;
var atpos=x.indexOf("#");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
document.getElementById("nameOfOwnerEmail").style.visibility="visible";
document.getElementById("nameOfOwnerEmail1").style.visibility="visible";
y= false;
}
else
{document.getElementById("nameOfOwnerEmail").style.visibility="hidden";
document.getElementById("nameOfOwnerEmail1").style.visibility="hidden";
}
return y;
}
</script>
I am getting my screen (as you can see in the image) after running the script when alternate fields are filled... It doesn't print continuous red text, it is printing the space of hidden fields too... How can I get the continuous text of empty fields?
Sorry as I am a new user so my image is not visible, but in the image I am showing when I fill only the name of the owner and address. It prints the name of the company and valid Email ID in red, but in the middle of these there is a vacant space of hidden address text. How can I remove that?

Instead of using
.style.visibility="visible";
use
.style.display = '';
and for
.style.visibility="hidden";
use
.style.display = 'none';

Here's the jsfiddle for you.
http://jsfiddle.net/rakesh_katti/cLjAN/
Just check out if that's the desired output.
You have mis-placed php script inside the value attribute of each input tag.
And your border:none makes the border of the input disappear. I corrected that. And I assume that u have used a div to just get a red * behind every input to signify it is compulsory field.
Have I got it right?