How can I select multiple span elements? - javascript

If I select my span element by ID it gets executed but I want to select multiple span elements. I tried with class and name but it also not working.
const uname = document.getElementById('fname')
const form = document.getElementById('form')
const errorElement = document.getElementById('formerror')
form.addEventListener('submit', (e) = \ > {
let messages = \ [\]
if (uname.value === '' || uname.value == null) {
messages.push("Name is required")
}
if (messages.length\ > 0) {
e.preventDefault()
errorElement.innerHTML = messages.join(', ')
}
})
<div id="error">
<form name="signupform" action="signupdetails.php" method="get" id="form">
<input type="text" class="text" placeholder="Username" id="fname"><b><span id="formerror"></span></b>
<input type="text" class="text" placeholder="Roll:no" name="froll"><b><span id="formerror"></span></b>
<input type="email" class="text" placeholder="Email" id="femail"><b><span id="formerror"></span></b>
<i class="fa fa-eye-slash" aria-hidden="true" id="icon1"></i>
<input type="password" class="text" placeholder="Password" id="password1" name="fpass">
<i class="fa fa-eye-slash" aria-hidden="true" id="icon2"></i>
<input type="password" class="text" placeholder="Confirm Password" id="password2" name="fcpass">
<button id="btn" style="color: white;" type="submit">Sign up</button> <br> <br> <br>
</form>
</div>

An id should be unique in the entire document, see https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute
Use a class on your span elements and query them with document.querySelectorAll('.formerror').
const uname = document.getElementById('fname')
const form = document.getElementById('form')
const errorElements = document.querySelectorAll('.formerror')
console.log(errorElements)
<div id="error">
<form name="signupform" action="signupdetails.php" method="get" id="form">
<input type="text" class="text" placeholder="Username" id="fname"><b><span class="formerror"></span></b>
<input type="text" class="text" placeholder="Roll:no" name="froll"><b><span class="formerror"></span></b>
<input type="email" class="text" placeholder="Email" id="femail"><b><span class="formerror"></span></b>
<i class="fa fa-eye-slash" aria-hidden="true" id="icon1"></i>
<input type="password" class="text" placeholder="Password" id="password1" name="fpass">
<i class="fa fa-eye-slash" aria-hidden="true" id="icon2"></i>
<input type="password" class="text" placeholder="Confirm Password" id="password2" name="fcpass">
<button id="btn" style="color: white;" type="submit">Sign up</button> <br> <br> <br>
</form>
</div>

Just had a somewhat similar issue to this, & as others have already mentioned. You will want to change this snippet of code below in you're javascript
document.getElementById('formerror')
To instead
document.querySelectorAll(".formerror") // Be sure to also change from and ID to instead using classes for the form error
Also as ID's are only meant to be used once, trying to assign them and use them more than once should not work as they are meant to be unique to one element. So this is why you should instead transition to adding them as classes instead.
Now as for when you are trying to access you're span elements by Javascript, since there is more than one span element. You will need to ensure that you use the "querySelectorAll" function as this will allow you to target all of you're span elements. Otherwise if using just the "querySelector" it will only apply to the first span element, while the other two span elements remain un affected.
Hope this could help to add a bit of insight and clear some things up for you.

First change the id to a class attribute, because the id should be unique to the entire document.
<span class="formerror"></span>
Then Instead of using document.getElementById(), use document.querySelectorAll(".formerror").
It will solve your problem.

Related

Clicking a button will put a value at input field without reloading the page

I just want to ask on how to put a value in an input field without reloading the page. Heres my code. What i want to happen is that when i click the button, "1234567" will automatically be inside or value of the input fields but without refreshing the page. This how my code is but nothing is happening. Thank you in advance!
This is for my input fields
<div class="form-group">
<label for="password">{{ $edit ? trans("app.new_password") : trans('app.password') }} <text class="text-danger">*</label>
<input type="password" class="form-control" id="password" name="password" #if ($edit) placeholder="#lang('app.leave_blank_if_you_dont_want_to_change')" #endif>
</div>
<div class="form-group">
<label for="password_confirmation">{{ $edit ? trans("app.confirm_new_password") : trans('app.confirm_password') }} <text class="text-danger">*</label>
<input type="password" class="form-control" id="password_confirmation" name="password_confirmation" #if ($edit) placeholder="#lang('app.leave_blank_if_you_dont_want_to_change')" #endif>
</div>
Then this for my button that when click it will trigger the event
<input type="button" class="btn btn-warning btn-sm btn-block" id="default_pass" onclick="myFunction()">
<i class="glyphicon glyphicon-filter"></i> Default Pass
</input>
Then this is the javascript
<script type="text/javascript">
$(document).on('click', 'default_pass', function myFunction() {
document.getElementById("password").value = "1234567";
document.getElementById("password_confirmation").value = "1234567";
});
</script>
PS Im really no good at javascript. Thanks for the help!
The problem is that your HTML is invalid. <input> isn't a container, so Default Pass is not inside it. Clicking on that doesn't trigger a click on the button.
You should use <button> instead.
And in the jQuery you need to use #default_pass as the selector. You don't need the onclick attribute in the button, since you're using jQuery to bind the event handler. You never defined the function as a global name; using function myFunction() in the jQuery event handler only defines the name in the local scope of the function; see Why JavaScript function declaration (and expression)?
$(document).on('click', '#default_pass', function myFunction() {
$("#password, #password_confirmation").val("1234567");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="password">Password <text class="text-danger">*</label>
<input type="password" class="form-control" id="password" name="password" #if ($edit) placeholder="Leave blank if you don't want to change" #endif>
</div>
<div class="form-group">
<label for="password_confirmation">Confirm Password <text class="text-danger">*</label>
<input type="password" class="form-control" id="password_confirmation" name="password_confirmation" #if ($edit) placeholder="Leave blank if you don't want to change" #endif>
</div>
<button type="button" class="btn btn-warning btn-sm btn-block" id="default_pass" >
<i class="glyphicon glyphicon-filter"></i>
Default Pass
</button>

JavaScript: show password on hold

I have 2 inputs for passwords. Each input field has 'show' button, which shows password on holding that button.
<form name="resetting_form" method="post" action="">
<div class="form-group has-feedback">
<input type="password" id="password_first" required="required" placeholder="New Password" class="form-control">
<span class="show">show</span>
</div>
<div class="form-group has-feedback">
<input type="password" id="password_second" required="required" placeholder="Repeat Password" class="form-control">
<span class="show">show</span>
</div>
<input type="submit" class="btn btn-primary" value="Submit">
</form>
Here is what I have
$(".form-control").on("keyup",function(){
if ($(this).val())
$(".show").show();
else
$(".show").hide();
});
$(".show").mousedown(function(){
$(".form-control").attr('type','text');
}).mouseup(function(){
$(".form-control").attr('type','password');
}).mouseout(function(){
$(".form-control").attr('type','password');
});
Problem
When I click to 'show' button, both input fields are shown. How to make sure that only corresponding password is shown?
When you use $(".form-control"), jquery select all .form-control element. But you need to select target element using this variable in event function and use .prev() to select previous element.
$(".show").mousedown(function(){
$(this).prev().attr('type','text');
}).mouseup(function(){
$(this).prev().attr('type','password');
}).mouseout(function(){
$(this).prev().attr('type','password');
});
Just target the previous input instead of all inputs with the given class
$(".form-control").on("keyup", function() {
if ($(this).val())
$(this).next(".show").show();
else
$(this).next(".show").hide();
}).trigger('keyup');
$(".show").mousedown(function() {
$(this).prev(".form-control").prop('type', 'text');
}).mouseup(function() {
$(this).prev(".form-control").prop('type', 'password');
}).mouseout(function() {
$(this).prev(".form-control").prop('type', 'password');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="resetting_form" method="post" action="">
<div class="form-group has-feedback">
<input type="password" id="password_first" required="required" placeholder="New Password" class="form-control">
<span class="show">show</span>
</div>
<div class="form-group has-feedback">
<input type="password" id="password_second" required="required" placeholder="Repeat Password" class="form-control">
<span class="show">show</span>
</div>
<input type="submit" class="btn btn-primary" value="Submit">
</form>
In react We simply do with
We probably need to use the onMouseDown and onMouseUp, onMouseOut events
onMouseDown={handleShowPassword}
onMouseUp={handleShowPassword}
onMouseOut={handleShowPasswordHideOnMouseOut}

Password confirmation validation not showing as intended

This is an extension of the the question I had asked earlier today (it's still unsolved, any help is very much appreciated). I have seen a lot of questions regarding this on stack overflow, and my code is based on something I found on a tutorial website.
I have 2 password forms which I wish to validate. I just want to submit it if they match. Here's my code-
<li>
<div class="input-group col-xs-5 pw">
<input type="password" name="pw" class="form-control" placeholder="Enter a new password" id="new-pw" />
</div>
</li>
<li>
<div class="input-group col-xs-5">
<input type="password" name="cnfrm-pw" id="cnfrm-pw" class="form-control" placeholder="Confirm new password" />
<span class="input-group-btn">
<button class="btn btn-primary" type="submit" id="pw-btn"> <em class="glyphicon glyphicon-circle-arrow-right"> </em> </button>
</span>
</div>
</li>
My javascript-
$(document).ready(function () {
$('#pw-btn').click( function() {
var pwd1 = document.getElementById("new-pw").value;
var pwd2 = document.getElementById("cnfrm-pw").value;
if (pwd1 != pwd2)
{
document.getElementById("cnfrm-pw").setCustomValidity("Passwords Don't Match");
}
else {
document.getElementById("cnfrm-pw").setCustomValidity('');
//empty string means no validation error
}
}
);
});
I am expecting an HTML5 validation form which tells me the passwords dont match, something like this. Nothing happens however.
Is there a mistake in my approach to custom validation? Thank you in advance all, very grateful for the help and advise.
ANSWER
I used the following code to get this working. It was a modification of the submitted answers. Thanks for all the help guys!
HTML:
<form action="#" id="f" method="post">
<li>
<div class="input-group col-xs-5 pw">
<input type="password" name="pw" class="form-control new-pw" placeholder="Enter a new password" id="new-pw" required pattern="(?=.*\d)(.{6,})" />
</div>
</li>
<li>
<div class="input-group col-xs-5">
<input type="password" name="cnfrm-pw" id="cnfrm-pw" class="form-control cnfrm-pw" required placeholder="Confirm new password" />
<span class="input-group-btn">
<button class="btn btn-primary" type="submit" id="pw-btn"> </button>
</span>
</div>
</li>
</form>
JS
$(document).ready(function () { //This confirms if the 2 passwords match
$('#f').on('keyup', '.cnfrm-pw', function (e) {
var pwd1 = document.getElementById("new-pw").value;
var pwd2 = document.getElementById("cnfrm-pw").value;
if (pwd1 != pwd2) {
document.getElementById("cnfrm-pw").setCustomValidity("The passwords don't match"); //The document.getElementById("cnfrm-pw") selects the id, not the value
}
else {
document.getElementById("cnfrm-pw").setCustomValidity("");
//empty string means no validation error
}
e.preventDefault(); //would still work if this wasn't present
}
);
});
.setCustomValidity tooltip will trigger only when the form is submitting.
Javascript
$(document).ready(function() {
$('#f').submit(function(e) {
var pwd1 = document.getElementById("new-pw").value;
var pwd2 = document.getElementById("cnfrm-pw").value;
if (pwd1 != pwd2) {
document.getElementById("cnfrm-pw").setCustomValidity("Passwords Don't Match");
} else {
document.getElementById("cnfrm-pw").setCustomValidity('');
//empty string means no validation error
}
e.preventDefault();
}
);
});
HTML
<form action="#" id="f"><li>
<div class="input-group col-xs-5 pw">
<input type="password" name="pw" class="form-control" placeholder="Enter a new password" id="new-pw" />
</div>
</li>
<li>
<div class="input-group col-xs-5">
<input type="password" name="cnfrm-pw" id="cnfrm-pw" class="form-control" placeholder="Confirm new password" />
<span class="input-group-btn">
<input type="submit" />
</span>
</div>
</li>
</form>
Have a look:
http://codepen.io/anon/pen/WwQBZy
I believe you're missing required attribute:
<input type="password" name="pw" class="form-control" placeholder="Enter a new password" id="new-pw" required />
Notice the required at the end.
Also, if you want to set a minimum:
<input type="password" name="pw" class="form-control" placeholder="Enter a new password" id="new-pw" pattern=".{5,}" title="Minmimum 5 letters or numbers." required />
As for the submitting the form, when the validation passes, you could submit the form using submit() function available in the Web API. You can read about it here.

Fill out text field within an element

I know there are already some threads about accessing an element within another element...I tried a lot of stuff but I can't get it to work...
JSFiddle -> http://jsfiddle.net/YcPc8/2/
What I want to do on the page is to fill out the username and the password - then click the login button.
Here is a part of the html code of the webpage:
<section id="notifications"></section>
<div style="display: block;" id="login" class="">
<div id="login-content">
<form>
<h1>Nessus Vulnerability Scanner</h1>
<input name="login" tabindex="1" placeholder="Username" maxlength="128" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" class="required login-username" type="text">
<i class="glyphicons username"></i>
<input name="password" tabindex="2" placeholder="Password" maxlength="128" autocomplete="off" class="required login-password" type="password">
<i class="glyphicons password"></i>
<div id="remember-me" class="floatleft">
<div class="checkbox login-remember"></div>
<span class="floatleft">Remember Me</span>
</div>
<button type="submit" id="sign-in" tabindex="3" class="button secondary login floatright">Sign In</button>
</form>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
<h2>Tenable Network Security</h2>
<div class="clear"></div>
Now I want to fill in the login and the password field...
Here is some of the code I tried within a javascript:
var nessus = window.open("https://localhost:8834/html5.html#/scans");
var doc = nessus.document.getElementById("login-content").getElementsByName("login");
doc.setAttribute("value","USERNAME");
element.getElementsByName("login") returns a list of elements. You might want to write this if you're sure it will return 1 element:
var doc = nessus.document.getElementsByName("login")[0];
EDIT : Moreover, getElementsByName is a method of the Document Interface. You can't use it on node element.
You'd better give an ID to your username input field, and access it directly by
var doc = document.getElementById("usernameInput");
doc.value = "USERNAME";
JSFiddle : http://jsfiddle.net/YcPc8/4/

Create elements in JQuery inside other

I know how to create a element whit JQuery, but I don't know how to place that element, exactly where I want.
<form action="/register" enctype="multipart/form-data" method="POST">
<span class="help-block">Username</span>
<input id="checkuser" type="text" name="nuser" placeholder="Username"/>
<span class="help-block">Email</span>
<input id="mail" type="text" name="nmail" placeholder="Your m#il"/>
<span class="help-block">Password</span>
<input type="password" name="npass" placeholder="Your password"/>
<span class="help-block">Avatar</span>
<input type="file" name="navatar" accept="image/*">
<br/>
<input type="submit" value="Submit"/>
</form>
I'm doing AJAX request with JQuery, so, depends of the result of the request, I create, or not an element to the left of the inputs. How I do that?
Thank's advance!
If by left of an input you mean before it then you can use .insertBefore().
$("<span/>", {
text: "My newly created span element"
}).insertBefore("input#checkuser");
Or, also you may use .before().

Categories