Develop Reference

How to Remove disable attribute from a button after input validation?

I have a form with a disabled button at first and if you leave an input empty or fill it with anything but numbers it will raise an error and if you insert number the error will be removed. My question is how can I remove disable attribute from the button after all inputs are error free.
Here what I've tried so far:
$("input").blur(function () {
if (!Number($(this).val()) || $(this).val() === "") {
$(this).addClass("raise-error");
} else {
$(this).removeClass("raise-error");
}
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: "Montserrat", sans-serif;
scroll-behavior: smooth;
text-align: center;
overflow-x: hidden;
color: #08085c;
background-color: #111;
}
.container {
width: 80%;
height: 50vh;
background-color: #fff;
margin: auto;
display: flex;
}
.team {
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: center;
align-items: center;
}
.team-a {
background-color: bisque;
}
.error {
text-align: right;
color: red;
opacity: 0;
}
.raise-error + .error {
opacity: 1;
}
input.raise-error {
border: 1px solid red;
}
.record-box {
margin-top: 20px;
}
label {
margin-right: 10px;
}
.btn {
margin-top: 20px;
padding: 10px 20px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="team team-a">
<h2>Team A Records</h2>
<div class="record-box">
<div class="input-field">
<label for="record-1"> Record 1</label>
<input type="text" id="record-1" />
<div class="error">number please</div>
</div>
<div class="input-field">
<label for="record-2"> Record 2</label>
<input type="text" id="record-2" />
<div class="error">number please</div>
</div>
<div class="input-field">
<label for="record-3"> Record 3</label>
<input type="text" id="record-3" />
<div class="error">number please</div>
</div>
</div>
</div>
<button class="btn" disabled>Submit</button>

You can give the inputs a default attribute like data-valid="false".
When a field is blurred, you can change the attribute's value to true after successfully validating it.
You can then enable the button if all the data-valid="false" are changed to data-valid="true"
Try this
$("input").blur(function() {
if (!Number($(this).val()) || $(this).val() === "") {
$(this).addClass("raise-error");
$(this).attr('data-valid', 'false');
} else {
$(this).removeClass("raise-error");
$(this).attr('data-valid', 'true');
}
$('.btn')[$('[data-valid="false"]').length > 0 ? 'attr' : 'removeAttr']('disabled', 'disabled');
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: "Montserrat", sans-serif;
scroll-behavior: smooth;
text-align: center;
overflow-x: hidden;
color: #08085c;
background-color: #111;
}
.container {
width: 80%;
height: 50vh;
background-color: #fff;
margin: auto;
display: flex;
}
.team {
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: center;
align-items: center;
}
.team-a {
background-color: bisque;
}
.error {
text-align: right;
color: red;
opacity: 0;
}
.raise-error+.error {
opacity: 1;
}
input.raise-error {
border: 1px solid red;
}
.record-box {
margin-top: 20px;
}
label {
margin-right: 10px;
}
.btn {
margin-top: 20px;
padding: 10px 20px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="some-container">
<div class="team team-a">
<h2>Team A Records</h2>
<div class="record-box">
<div class="input-field">
<label for="record-1"> Record 1</label>
<input type="text" id="record-1" data-valid="false" />
<div class="error">number please</div>
</div>
<div class="input-field">
<label for="record-2"> Record 2</label>
<input type="text" id="record-2" data-valid="false" />
<div class="error">number please</div>
</div>
<div class="input-field">
<label for="record-3"> Record 3</label>
<input type="text" id="record-3" data-valid="false" />
<div class="error">number please</div>
</div>
</div>
</div>
<button class="btn" disabled>Submit</button>
</div>

The most straight forward way and safest is to reuse your validation function for testing both if the input is valid, and testing if all inputs are valid.
The example below puts the inputs where blur is attached to in the allInputs variable, and the button is disabled if not all inputs are valid (with the every function calling the same isValid functionality)
const allInputs = $("input").blur(function () {
const isValid = val => val !== "" && Number(val);
$(this).toggleClass("raise-error",!isValid(this.value));
$('.btn')[0].disabled = !allInputs.toArray().every(i=>isValid(i.value));
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: "Montserrat", sans-serif;
scroll-behavior: smooth;
text-align: center;
overflow-x: hidden;
color: #08085c;
background-color: #111;
}
.container {
width: 80%;
height: 50vh;
background-color: #fff;
margin: auto;
display: flex;
}
.team {
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: center;
align-items: center;
}
.team-a {
background-color: bisque;
}
.error {
text-align: right;
color: red;
opacity: 0;
}
.raise-error + .error {
opacity: 1;
}
input.raise-error {
border: 1px solid red;
}
.record-box {
margin-top: 20px;
}
label {
margin-right: 10px;
}
.btn {
margin-top: 20px;
padding: 10px 20px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="team team-a">
<h2>Team A Records</h2>
<div class="record-box">
<div class="input-field">
<label for="record-1"> Record 1</label>
<input type="text" id="record-1" />
<div class="error">number please</div>
</div>
<div class="input-field">
<label for="record-2"> Record 2</label>
<input type="text" id="record-2" />
<div class="error">number please</div>
</div>
<div class="input-field">
<label for="record-3"> Record 3</label>
<input type="text" id="record-3" />
<div class="error">number please</div>
</div>
</div>
</div>
<button class="btn" disabled>Submit</button>

If below code doesn't work:
if ($('.raise-error').length > 0) {
$('.btn').attr( 'disabled', true );
return true;
}
Then please try to change the button tag with:
<input type="button" class="btn">

Vertical nav bar is overlapping main body when i resize?

I'm fairly new to coding less than 6 months and am working on my first paid website and I've run into an issue i'm really not sure how to fix. thanks for the help. I've already tried setting margins but CSS is tricky so maybe i'm not doing enough i'm really not sure how to fix
This is what the page looks like when down sized
This is what the page looks like at regular size
.login-page{
width: 360px;
padding: 10% 0 0;
margin: auto;
}
.form{
position: relative;
z-index: 1;
background: rgba(0,0,0,0.5);
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
border-radius: 25px;
}
.header-logo{
width: 100%;
max-width: 300px;
height: auto;
}
.header{
text-align: right;
float: right
}
ul {
list-style-type: none;
margin: 15px;
padding: 0;
width: 300px;
background-color: rgba(160, 143, 70, 0.4);
font-family: "Roboto", sans-serif;
border-radius: 25px;
text-align: center;
font-size: 20px;
}
li a {
display: block;
color: #ffffff;
padding: 8px 16px;
text-decoration: none;
}
<body>
<div class="header">
<img src="header-logo.png" class="header-logo">
<ul>
<li>Home</li>
<br>
<li>Store</li>
<br>
<li>Contact</li>
<br>
<li>About</li>
</ul>
</div>
<div class="login-page">
<div class="form">
<form class="register-form">
<h1 class="register-header">Register</h1>
<input type="text" placeholder="Username">
<input type="text" placeholder="Email">
<input type="text" placeholder="Password">
<button>Create</button>
<p class="message">Already Registered? Log-in</p>
</form>
<form class=:login-form>
<h1 class="login-header">Log-In</h1>
<input type="text" placeholder="Username">
<input type="text" placeholder="Password">
<button>Log-in</button>
<p class="message">Not Registered? Register</p>
</form>
</div>
</div>

You can make it clear:both for login div in mobile mode. It is due to div .login-page where you gave margin:auto to make it centralized.
.login-page{
width: 360px;
padding: 10% 0 0;
margin: auto;
}
.form{
position: relative;
z-index: 1;
background: rgba(0,0,0,0.5);
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
border-radius: 25px;
}
.header-logo{
width: 100%;
max-width: 300px;
height: auto;
}
.header{
text-align: right;
float: right
}
ul {
list-style-type: none;
margin: 15px;
padding: 0;
width: 300px;
background-color: rgba(160, 143, 70, 0.4);
font-family: "Roboto", sans-serif;
border-radius: 25px;
text-align: center;
font-size: 20px;
}
li a {
display: block;
color: #ffffff;
padding: 8px 16px;
text-decoration: none;
}
#media(max-width:767px){
.login-page{
clear: both;
}
}
<div class="header">
<img src="header-logo.png" class="header-logo">
<ul>
<li>Home</li>
<br>
<li>Store</li>
<br>
<li>Contact</li>
<br>
<li>About</li>
</ul>
</div>
<div class="login-page">
<div class="form">
<form class="register-form">
<h1 class="register-header">Register</h1>
<input type="text" placeholder="Username">
<input type="text" placeholder="Email">
<input type="text" placeholder="Password">
<button>Create</button>
<p class="message">Already Registered? Log-in</p>
</form>
<form class=:login-form>
<h1 class="login-header">Log-In</h1>
<input type="text" placeholder="Username">
<input type="text" placeholder="Password">
<button>Log-in</button>
<p class="message">Not Registered? Register</p>
</form>
</div>
</div>

Javascript not running when image clicked

In this I want to make appear a window when I click an image. The image is the address book one and it is supposed to appear an address book in the div id="janela2". I want it to be draggable and resizable but what is the most important here is to make it work because I believe the js code is correct but when I click on the image the address book doesn't appear.
The js code that is not running are the two first functions of the js and I don't know why. I only put the address book code so that you can see if it still works with the problem fixed. What is going on? How to solve it?
Check the codepen since the snippet is not working
The first part of it is solved. Now the windows shows up uppon clicking but now the address book doesn't work. https://codepen.io/Fropis/pen/mYydYd There's the new code but now the address book won't work. Why?
https://codepen.io/Fropis/pen/XwJWjg
/**************************************** Contactos **********************************************************/
function openAB(){
document.getElementById("janela2").innerHTML = document.getElementById("mydiv").innerHTML;
}
function fechar(){
document.getElementById("janela2").innerHTML = "";
}
/*****************************THE ONE THAT MATTERS IS ABOVE****************/
html, body {
width: 3779.527559055px;
height: 100%;
font-family: "Helvetica Neue", Helvetica, sans-serif;
color: #444;
-webkit-font-smoothing: antialiased;
background-image: url("https://images4.alphacoders.com/111/111298.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: 350% 100%;
font-family: Arial, Helvetica, sans-serif;
}
/* Place the navbar at the bottom of the page, and make it stick */
.navbar {
background-color: none;
left: 30%;
position: absolute;
bottom: 0;
height: 500px;
width: 1500px;
margin-left: auto;
margin-right: auto;
padding-left: 10%;
padding-right: 10%;
border-top-right-radius: 30px;
border-top-left-radius: 30px;
text-align: center;
overflow: hidden;
}
#NetImg, #Home, #contact{
width: 400px;
height: 400px;
padding:20px;
background: none;
}
.panel {
background: #fafafa;
padding: 1em;
width: 92.5%;
margin: auto;
max-width: 30em;
}
input {
width: 100%;
box-sizing: border-box;
font-size: 1em;
margin-top: 0.5em;
padding: 0.5em;
}
input:focus {
outline: none;
}
input::after {
width: 100%;
height: 10px;
background: red;
}
.nav-list {
width: 92.5%;
max-width: 30em;
text-align: center;
margin: auto;
}
.nav-list li {
list-style: none;
display: inline-block;
background: white;
padding: 0.7em;
margin: 0 0.1em;
}
.nav-list .active {
background-color: black;
}
#janela2{
position: absolute;
width:1900px;
height:1500px;
left:1500px;
top:550px;
border-radius:20px black solid;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="cale.css">
</head>
<body>
<div id="janela2">OLA</div>
<div id="mydiv" style="display:none;">
<div id="navigation">
<ul class="nav-list">
<li id="js-show-all">Mostrar Todos</li>
<li id="js-search">Procurar</li>
<li id="js-add-new">Adicionar Contacto</li>
</ul>
</div>
<div id="search-panel" class="panel">
<h1>Procurar Contacto</h1>
<form id="search" action="#">
<div id="results"></div>
<div>
<label>
<input type="text" name="search" id="search" placeholder="Insira nome do contacto" />
</label>
</div>
<input type="submit" value="Procurar"/>
</form>
</div>
<div id="contact-panel" class="panel">
<form id="contact" action="#">
<h1>Adicionar Novo Contacto</h1>
<div>
<label>
<input type="text" name="person" id="name" placeholder="Jos&eacute Bigodes" required/>
</label>
<label>
<input type="text" name="phone" id="name" placeholder="912942923" maxlength="9" pattern=".{9,}" required title="Insira 9 caracteres"/>
</label>
<label>
<input type="email" name="email" id="name" placeholder="nome#desk.com" pattern="+#desk.com" required/>
</label>
</div>
<div>
<input type="submit" value="Adicionar" />
</div>
</form>
</div>
<div id = "show-panel" class="panel">
</div>
</div>
<div class="navbar">
<a><img onclick="openAb()" src="http://downloadicons.net/sites/default/files/address-book-icon-62889.png" id="contact"></a>
</div>
</body>
<script src=cale.js></script>
</html>

openAb has a typo in html vs openAB function in js . Replace with
<img onclick="openAB()" ....

Your function name is openAB but you are calling openAb
<img onclick="openAB()" src="http://downloadicons.net/sites/default/files/address-book-icon-62889.png" id="contact">

Fix div position in a form

I am using the same form on two different pages. On the first one every div is tidy in the desired position. On the second page, there is a select that only appears after a change (jquery trigger), which causes the div below it to appear first on the right but after the trigger it moves on the left. I'd like the div which contains radio buttons to be on the left side at all times, just like it is on the first page. The part that I'd like to fix is #center-add-new-event-form .container-field input[type=radio].
This is the css.
#center-add-new-event-form,
#center-add-new-event-form * {
box-sizing: border-box;
}
#center-add-new-event-form {
padding: 20px 10px 0px;
}
#center-add-new-event-form .container-field {
width: 50%;
float: left;
padding: 0 10px;
margin-bottom: 20px;
vertical-align: top;
}
#center-add-new-event-form .container-field label {
display: block;
font-weight: 600;
margin-bottom: 5px;
}
#center-add-new-event-form .container-field input[type=text],
#center-add-new-event-form .container-field select {
height: 34px;
border: 1px solid #ddd;
padding: 0 7px;
display: block;
width: 100%;
}
#center-add-new-event-form .container-field input[type=radio]
{
height: 34px;
border: 1px solid #ddd;
padding: 0 7px;
display: block;
width: 100%;
}
#center-add-new-event-form .center-error-message {
font-size: 0.9em;
color: darkred;
display: block;
margin-left: 1px;
}
.center-event-actions {
border-top: 1px solid #ddd;
padding: 20px 20px 15px;
text-align: right;
}
.clearfix:before,.clearfix:after {
display: table;
content: " ";
}
.clearfix:after {
clear: both;
}
#media screen and (max-width: 767px) {
#center-add-new-event-form .container-field {
float: none;
width: 100%;
}
}
<form id="center-add-new-event-form" class="clearfix">
<div class="container-field" style="width: 100%">
<label></label>
<div id="center-request-details">
</div>
</div>
<div class="container-field">
<label for="teaching-requests"></label>
<select id="input-teaching-requests" name="teaching-requests" class="create-request-event ui-widget-content ui-corner-all">
<option value=""></option>
<option value=""></option>
</select>
<span class="center-error-message"></span>
</div>
<div class="container-field">
<label for="request-date"></label>
<input type="text" name='request-date' class="create-request-event event-datepicker ui-widget-content ui-corner-all">
<span class="center-error-message"></span>
</div>
</div>
<div class="container-field">
<label for="teaching-start-time"></label>
<input type="text" name="teaching-start-time" class="create-request-event event-timepicker text ui-widget-content ui-corner-all">
<span class="center-error-message"></span>
</div>
<span class="clearfix"></span>
<div class="container-field">
<label for="teaching-end-time"></label>
<input type="text" name="teaching-end-time" class="create-request-event event-timepicker text ui-widget-content ui-corner-all">
<span class="center-error-message"></span>
</div>
<div class="container-field">
<label for="teaching-teacher"></label>
<div id='contanier-teacher-selection'>
</div>
<span class="center-error-message"></span>
</div>
<div class="container-field pull-left" align="left">
<label for="recursive-events" align="left">
<input type="radio" align="left" name="recursive" value="daily"/>Daily
<input type="radio" align="left" name="recursive" value="weekly"/>Weekly
<input type="radio" align="left" name="recursive" value="monthly"/>Monthly
</label>
</div>
<span class="center-error-message"></span>
</form>
<div class="center-event-actions">
<button id="cancel-add-new-event" class='button' data-izimodal-close="" data-izimodal-transitionout="bounceOutDown"></button>
<button id="add-new-event" class='button button-primary'></button>
</div>
Before
After

It looks like it is caused by container-field <= width: 50% and float
so when this div appears it appears next to last one
the solution add
<span class="clearfix"></span>
before the the element with radio buttons

This might work:
#center-add-new-event-form .container-field input[type=radio]:before
{
height: 34px;
border: 1px solid #ddd;
padding: 0 7px;
display: block;
width: 100%;
}
#center-add-new-event-form .container-field input[type=radio]:after
{
height: 34px;
border: 1px solid #ddd;
padding: 0 7px;
display: block;
width: 100%;
float: right;
}

html5 ,JQuery - can't get value from custom attribute

My Images are not appending from Left to right on click event ..I found that variable sources$ was not getting any data from a div with data-module attribute
Button Click event
$('#executeButton').click(function () {
var sources$ = $('#sourcePane input:checked~img');
});
It shows Blank object array
this is the particular div with data-module
<div data-module="Sources" data-module-id="sourcePane">
<div>
<input type="checkbox" name="sources"/><br/>
<img src="images/source1.png" alt="source 1" title="Source 1" id="xyz"/>
</div>
</div>
in Demo HTML Page
http://www.bibeault.org/jqia2/chapter3/lab.move.and.copy.html
sources$ has is value stored as "img#xyz source1.png"
It is just not working on my local IIS
this is the complete code
<!DOCTYPE html>
<html>
<head>
<title>Move and Copy Lab Page</title>
<link rel="stylesheet" type="text/css" href="../styles/core.css">
<style type="text/css">
div#sourcePane {
float: left;
width: 40%;
}
div#sourcePane img {
margin-bottom: 8px;
}
div#targetPane {
float: right;
width: 55%;
}
div.target {
border: 1px solid maroon;
background-color: #ffffcc;
margin-bottom: 8px;
}
#controls div {
margin-bottom: 4px;
}
#restoreButton {
display: none;
}
.done input[type=checkbox], .done #executeButton {
display: none;
}
.done #restoreButton {
display: inline;
}
</style>
<script type="text/javascript" src="../Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="../Scripts/jqia2.support.js"></script>
<script type="text/javascript" >
$(function () {
$('#restoreButton').click(function () {
window.location = 'lab.move.and.copy.html';
});
$('#executeButton').click(function () {
$('body').addClass('done');
$('.done #controls :radio').attr('disabled', true);
var sources$ = $('#sourcePane input:checked~img');
if ($('[name=clone]:checked').val() == 'yes') sources$ = sources$.clone();
var targets$ = $('#targetPane input:checkbox:checked').parents('.target');
var operation = $('[name=operations]:checked').val();
targets$[operation](sources$);
});
});
</script>
</head>
<body class="fancy">
<div id="pageContainer">
<div id="pageContent">
<h1>jQuery Move and Copy Lab Page</h1>
<div data-module="Sources" data-module-id="sourcePane">
<div>
<input type="checkbox" name="sources"/><br/>
<img src="images/source1.png" alt="source 1" title="Source 1" id="xyz"/>
</div>
<div>
<input type="checkbox" name="sources"/><br/>
<img src="images/source2.png" alt="source 2" title="Source 2"/>
</div>
<div>
<input type="checkbox" name="sources"/><br/>
<img src="images/source3.png" alt="source 3" title="Source 3"/>
</div>
</div>
<div data-module="Target Areas" data-module-id="targetPane">
<div id="target1" class="target">
<div><input type="checkbox" name="targets"/> Target 1</div>
</div>
<div id="target2" class="target">
<div><input type="checkbox" name="targets"/> Target 2</div>
</div>
<div id="target3" class="target">
<div><input type="checkbox" name="targets"/> Target 3</div>
</div>
<div id="controls">
<div>
<label>Operation:</label><br/>
<input type="radio" name="operations" value="append" checked="checked"/> append
<input type="radio" name="operations" value="prepend"/> prepend
<input type="radio" name="operations" value="before"/> before
<input type="radio" name="operations" value="after"/> after
</div>
<div>
<label>Clone?:</label><br/>
<input type="radio" name="clone" value="no" checked="checked"/> no
<input type="radio" name="clone" value="yes"/> yes
</div>
</div>
<div>
<button type="button" class="green90x24" id="executeButton">Execute</button>
<button type="button" class="green90x24" id="restoreButton">Restore</button>
</div>
</div>
<div class="footer">jQuery in Action, 2nd edition, sample code<br/>Bear Bibeault and Yehuda Katz</div>
</div>
</div>
</body>
</html>
Core.css
body {
background: #f5ffe8 none;
}
body.fancy {
background: #cccccc url('../images/backg.png');
}
body,th,td {
font-family: 'Verdana',sans-serif;
font-size: 9pt;
color: #444444;
}
#pageContainer {
width: 752px;
margin: 8px auto;
border: 3px #4a6074 solid;
background-color: white;
}
#pageContent {
padding: 16px;
}
h1 {
width: auto;
height: auto;
background-image: none;
padding: 0;
color: #4a6074;
font-size: 1.4em;
}
body.fancy h1 {
width: 640px;
height: 41px;
font-size: 1.2em;
background: url('../images/banner.h1.png') no-repeat;
padding: 24px 0 0 80px;
margin: 0 0 16px 0;
}
label {
font-weight: bold;
}
button {
text-align: center;
border: 0;
cursor: pointer;
}
button.green90x24 {
background: url('../images/button.90x24.green.png');
width: 90px;
height: 24px;
color: #444444;
font-weight: bold;
padding: 0;
}
div.module {
margin-bottom: 12px;
}
div.banner {
background-color: #a1c772;
}
div.banner h2 {
height: 23px;
background: url("../images/module.slice.png") repeat-x #a1c772;
color: white;
font-size: 1.1em;
font-weight: bold;
margin: 0 4px 0 4px;
padding: 7px 0 0 8px;
}
div.module div.body {
padding: 8px;
border: solid 2px #a1c772;
background-color: #f5ffe8;
}
div.module h3 {
color: #6b8150;
margin: 3px 0 3px 0;
font-size: 1.2em;
font-weight: bold;
}
p {
margin: 0 0 8px 0;
}
div.footer {
text-align: center;
clear: both;
font-size: 0.8em;
color: silver;
}
div.separator {
clear: both;
}
img[src="example.jpg"] {
background-color: white;
border: 1px black solid;
padding: 12px 12px 16px 12px;
border-bottom-width: 2px;
border-right-width: 2px;
}
.leftCap {
float: left;
width: 8px;
height: 30px;
background: no-repeat url("../images/module.left.cap.png");
}
.rightCap {
float: right;
width: 8px;
height: 30px;
background: no-repeat url("../images/module.right.cap.png");
}
I couldn't find the reason ...
Any suggestion will be helpful