We Keep Coding

Enable submit button when the input fields are not empty and the checkbox checked

Overview
I'm currently working on a project that involves a Register page. I'm using bootstrap and javascript/jquery on the client side.
The Problem
I don't want the user to submit the form until he fill each input field and check a checkbox. By default the submit button is disabled. I succeeded in activating the submit button when the fields are not empty. However my problem lies within checkbox, activating the submit button when the input fields are not empty and the checkbox checked.
This is a code snippet to better clarify my problem (eliminating unnecessary fields for this problem)
$(document).ready(function() {
$('.register input').keyup(function() {
var empty = false;
$('.register input').each(function() {
if ($(this).val().length == 0) {
empty = true;
}
});
if (empty) {
$('#register').attr('disabled', 'disabled');
} else {
$('#register').removeAttr('disabled');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- username input -->
<div class="form-outline mb-4 register">
<input type="text" id="registerUsername" class="form-control" />
<label class="form-label" for="registerUsername">Username</label>
</div>
<!-- Password input -->
<div class="form-outline mb-4 register">
<input type="password" id="registerPassword" class="form-control" />
<label class="form-label" for="registerPassword">Password</label>
</div>
<!-- Checkbox -->
<div class="form-check d-flex justify-content-center mb-4">
<input class="form-check-input me-2" type="checkbox" value="" id="registerCheck" aria-describedby="registerCheckHelpText" />
<label class="form-check-label" for="registerCheck">
I have read and agree to the terms
</label>
</div>
<!-- Submit button -->
<button type="submit" id="register" disabled="disabled" class="btn btn-dark btn-block mb-3">Register</button>
What have I tried?
Well, I came to answers on Stackoverflow and tried adjusting them to my need. Below are two solutions I tried and their flaws. Unfortunately, It didn't work as expected.
I tried checking if checkbox is checked just like I did with the input fields (I forgot the source for this one)
Here is the code I used:
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
if($(this).is(":not(:checked)")){
$('#register').attr('disabled', 'disabled');
}
});
});
The second approach was from this answer. This also didn't work :(
Any help is appreciated. Thanks in advance.

For enhanced UX, let's say the user checked the checkbox before filling the input fields. In this corner case, the user has to click elsewhere for the submit button to be activated. That's why the keyup function should be present.
The following code should be sufficient
// Enabling the register button only when the register fields are not empty
$(document).ready(() => {
$("input[type=text]").keyup(onFormUpdate);
$("input[type=password]").keyup(onFormUpdate);
$("input[type=checkbox]").change(onFormUpdate);
})
function onFormUpdate() {
const registerUsername = $("#registerUsername").val();
const registerPassword = $("#registerPassword").val();
const acceptedTnC = $("#registerCheck").prop('checked');
if (registerUsername && registerPassword && acceptedTnC) {
$("#register").removeAttr("disabled");
} else {
$("#register").attr("disabled", "disabled");
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" onchange="onFormUpdate()">
<!-- username input -->
<div class="form-outline mb-4 register">
<input type="text" id="registerUsername" class="form-control" />
<label class="form-label" for="registerUsername">Username</label>
</div>
<!-- Password input -->
<div class="form-outline mb-4 register">
<input type="password" id="registerPassword" class="form-control" />
<label class="form-label" for="registerPassword">Password</label>
</div>
<!-- Checkbox -->
<div class="form-check d-flex justify-content-center mb-4">
<input class="form-check-input me-2" type="checkbox" value="" id="registerCheck" aria-describedby="registerCheckHelpText" />
<label class="form-check-label" for="registerCheck">
I have read and agree to the terms
</label>
</div>
<!-- Submit button -->
<button type="submit" id="register" disabled="disabled" class="btn btn-dark btn-block mb-3">Register</button>
</form>

function funCheck() {
if (
$("#registerCheck").is(":checked") &&
$("#registerUsername").val().length > 0 &&
$("#registerPassword").val().length > 0
) {
$("#register").removeAttr("disabled");
} else {
$("#register").attr("disabled", "disabled");
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- username input -->
<div class="form-outline mb-4 register">
<input
type="text"
id="registerUsername"
class="form-control"
onchange="funCheck()"
/>
<label class="form-label" for="registerUsername">Username</label>
</div>
<!-- Password input -->
<div class="form-outline mb-4 register">
<input
type="password"
id="registerPassword"
class="form-control"
onchange="funCheck()"
/>
<label class="form-label" for="registerPassword">Password</label>
</div>
<!-- Checkbox -->
<div class="form-check d-flex justify-content-center mb-4">
<input
class="form-check-input me-2"
type="checkbox"
value=""
id="registerCheck"
aria-describedby="registerCheckHelpText"
onchange="funCheck()"
/>
<label class="form-check-label" for="registerCheck">
I have read and agree to the terms
</label>
</div>
<!-- Submit button -->
<button
type="submit"
id="register"
disabled="disabled"
class="btn btn-dark btn-block mb-3"
>
Register
</button>

In your edge case scenario, you have to explicitly bind the inputs with the custom function. In that function, we have to chack the values for input and checkbok. Hope this solution works for you.
$(document).ready(() => {
$("input[type=text]").keyup(onFormUpdate);
$("input[type=password]").keyup(onFormUpdate);
$("input[type=checkbox]").change(onFormUpdate);
})
function onFormUpdate() {
const userName = $("#registerUsername").val();
const password = $("#registerPassword").val();
const acceptedTnC = $("#registerCheck").prop("checked");
if (userName && password && acceptedTnC) {
$("#register").removeAttr("disabled");
} else {
$("#register").attr("disabled", "disabled");
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-outline mb-4 register">
<input type="text" id="registerUsername" class="form-control" />
<label class="form-label" for="registerUsername">Username</label>
</div>
<!-- Password input -->
<div class="form-outline mb-4 register">
<input type="password" id="registerPassword" class="form-control" />
<label class="form-label" for="registerPassword">Password</label>
</div>
<!-- Checkbox -->
<div class="form-check d-flex justify-content-center mb-4">
<input
class="form-check-input me-2"
type="checkbox"
value=""
id="registerCheck"
aria-describedby="registerCheckHelpText"
/>
<label class="form-check-label" for="registerCheck">
I have read and agree to the terms
</label>
</div>
<!-- Submit button -->
<button
type="submit"
id="register"
disabled="disabled"
class="btn btn-dark btn-block mb-3"
>
Register
</button>

v-if and v-else not working because updating page every time

I have the issue that the div in the v-if statement is not correctly working. If you run the server and the page when you click the button Sign Up it will briefly showing the div for signing up but it will get back the the original div in the first v-if statement after few seconds.
Instead I expect that it would show just show the div in the v-else because I am changing the boolean showSignUp with the v-on:click="signUp" which will call the function in the Vue App that will change the boolean.
This is the HTML :
<body onload="init()">
<!-- using the Vue App -->
<div id="app">
<!-- If it is not signed in just make it sign -->
<div v-if="!isLoggedIn" class="container-fluid">
<!-- Top Bar -->
<div class="row align-items-center justify-content-start">
<nav class="navbar navbar-light bg-light">
<h1>UST Computer Science Submission Tool</h1>
</nav>
</div>
<div class="row align-items-center justify-content-end">
<div v-if="!showSignUp">
<form class="getSpace" > <!-- SIGN IN FORM -->
<!-- Input fields -->
<div class="form-group">
<label for="inputEmail">Email address</label>
<input type="email" class="form-control" id="inputEmail">
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword">
</div>
<!-- Buttons -->
<button v-on:click="signIn" class="btn btn-primary">Sign In</button>
<button v-on:click="signUp" class="btn btn-primary">Sign Up</button>
</form>
</div>
<div v-if="showSignUp">
<form class="getSpace"> <!-- SIGN UP FORM -->
<!-- Input fields -->
<div class="form-group">
<label for="inputEmail">Email address</label>
<input type="email" class="form-control" id="singUpEmail">
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input type="password" class="form-control" id="singUpInputPassword">
</div>
<!-- Buttons -->
<button v-on:click="submitRegistration" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
<!-- Else is already signed in -->
<div v-else class="container-fluid">
<div class="row">
<div class="col">You did it</div>
<div class="col"></div>
</div>
</div>
</div>
</body>
This is the JS for the Vue App:
let app
// On loading page
function init() {
app = new Vue({
el: '#app',
data: {
email: '',
password: '',
isLoggedIn: false,
showSignUp: false
},
methods: {
signIn: signIn,
signUp: signUp,
submitRegistration: submitRegistration,
}
});
}
// methods
function signIn(event) { // when clicked Sing In button
// check before in the data base if it is correct
// Now show the Users page
app.isLoggedIn = !app.isLoggedIn;
}
function signUp (event) { // when clicked Sing Up button
// This will change the form
console.log('was here');
app.showSignUp = true;
}
function submitRegistration (event) {
console.log(event);
// Call http
}

you need to prevent the action
<button v-on:click.prevent="signUp" class="btn btn-primary">Sign Up</button>

i want to display two popups, one for error message and other for success message

I'm new to modals, i want to submit a form and then show success popup if user form is validated else want to show error popup. Also my it should execute php file for sending the email to user in background.
So, far i'm successful in executing the php file in background and show the model when user clicks on submit button.
But i want the popup to show when the form is validated. Also i want to use type="submit" instead of type="button" for form submit.
Here's my code :
<!-- javascript code to execute php file -->
<script type="text/javascript">
function executePhp() {
$.post("sendmail.php");
return false;
}
</script>
<!-- javascript code ends -->
<form class="well" action="" method="">
<div class="form-group col-md-6">
<label for="inputPassword4">Full Name</label>
<input type="text" name="name" class="form-control" id="inputPassword4" placeholder="Enter Full Name">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Phone Number</label>
<input type="number" name="mobile" class="form-control" id="inputEmail4" placeholder="Enter Mobile Number">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Email</label>
<input type="email" name="email" class="form-control" id="inputPassword4" placeholder="Enter Your Email">
</div>
</div>
<button type="button" class="btn btn-primary" onclick="executePhp()" style="margin-left: 3%;"
data-toggle="modal" data-target="#myModal">Check</button>
</form>
<!-- Code for popup -->
<!-- Modal -->
<div class="modal fade mymodal" id="myModal" role="dialog">
<div class="modal-dialog mydialog">
<!-- Modal content-->
<div class="modal-content mycontent">
<div class="modal-header myheader">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Message</h3>
</div>
<div class="modal-body mybody">
<br>
<br>
<h3>Thanks for choosing</h3>
<h4>
Your details will arive by email.
Sit back, we'll get back to you soon.
</h4>
<br>
<br>
</div>
<div class="modal-footer myfooter">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Code for popup end-->
Thank you.

You can use Jquery to achieve this.
In you php you can have two variables before the validation like:
$popup_message = "";
$popup_message_color = "";
Now if the form is validated you can display the modal like this:
$popup_message = "login successfully.";
$popup_message_color = "success";
//Open Modal
echo "<script type='text/javascript'>
$(document).ready(function(){
$('#myModal').modal('show');
});
</script>";
In the modal body you can display the message and color.
<div class="modal-body">
<p class="text-<?php echo $popup_message_color; ?>"><?php echo $popup_message; ?></p>
</div>
The same would be done for if validation fails, just change your message and color to $popup_message_color = "danger";
Note If you are validation to another page then the modal should be in that page and you change the close buttons to a link to go back.
Also php script should come after you loaded the jquery.

jQuery When button is clicked check to make sure given criteria is fulfilled then redirect page

I have a simple HTML form with a button with the class 'next-btn'. The form uses a simple validator, and when the submit button is clicked and the input fields are not validated, the '.form-group' container of the input field gets a class of '.has-error'.
What I want to achieve is, when '.next-btn' button is clicked check to make sure no "#step-1 .form-group" has any '.has-error' class then proceed to redirecting the page to the a given url "page2.html".
How can this be done using jQuery? I believe we can start with :
$('.next-btn').on('click', function(){
e.preventDefault();
// if #step1 .form-group does not have class of .has-error
// Redirect to page2.html [window.location.href = "http://page2.com";?]
});
Much appreciated!
Edit:
Here is the HTML:
<form role="form" class="order-form" method="get">
<div class="row setup-content" id="step-1">
<div class="steps-inner">
<div class="col-md-12">
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<input type="text" name="vehicle_year" class="form-control" placeholder="Car Year" data-error="Car Year is required" required />
<div class="help-block with-errors"></div>
</div><!-- end form-group -->
</div>
<div class="col-sm-4">
<div class="form-group">
<input type="text" name="vehicle_make" class="form-control" data-error="Make is required" placeholder="Make" required />
<div class="help-block with-errors"></div>
</div><!-- end form-group -->
</div>
</div><!-- end row -->
<div class="text-center form-submit">
<button class="btn next-btn next-btn1" type="submit">Next <i class="fa fa-long-arrow-right"></i></button>
</div>
</div>
</div><!-- end steps-inner -->
</div><!-- end setup-content -->
</form><!-- end order-form -->

Updated solution:
$('.next-btn').on('click', function() {
var haveErrors = false;
$formGroups = $('#step-1 .form-group');
$formGroups.each(function() {
if ($(this).hasClass('has-error')) {
haveErrors = true;
}
});
if (haveErrors) {
console.log('error');
} else {
console.log('no error');
}
});

Validate input text in bootstrap modal

I want to validate a form in a bootstrap modal without using any framework. It's actually a simple modal with only an input text and two buttons "Close" and "Send".
The user should type his/her name in the input box and click send. The form is the sent with the method post.
What I want to do is that, if the user doesn't enter anything in the input box of and clicks on the button "Send", the input box should have a red border circling it instead of the default blue border. Here's the code for my modal:
<div id="myModal" class="modal fade" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!--form-->
<form class = "form-horizontal" id="myForm" method="post" action="test.php" role="form">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">My modal</h4>
</div>
<div class="modal-body">
<p>
Please enter your name:
</p>
<br/>
<div class="form-group">
<div class="col-lg-12">
<label class="control-label" for="firstname">Name</label>
<input type="text" class="form-control required" id="firstname" name="firstname">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="myFormSubmit" class="btn btn-primary">Send</button>
</div>
</form>
</div>
</div>
</div>
I tried using javascript to change the class of the input text to has-errorbut it doesn't produce the red outline. When I click on send it sends the empty value through the post method instead of
Here's my javascript code:
<script type="text/javascript">
$('#myForm').validate({
rules: {
name: {
minlength: 1,
required: true
},
},
highlight: function (element) {
$('#firstname').removeClass('has-success').addClass('has-error');
},
success: function (element) {
$('#firstname').removeClass('has-error').addClass('has-success');
}
});
</script>
I feel like I'm mixing a whole lot of things here. I'm still new to bootstrap and javascript. How can I go about getting the desired red outline?
Thanks.
Edit:
Validate function:
function validate() {
var x = document.forms["myForm"]["firstname"].value;
if (x == null || x == "") {
return false;
}
}

You need to change the CSS classes of the input parent element div.form-group, not the input itself:
The HTML after the submit button click should look like this:
<div class="form-group has-error">
<div class="col-lg-12">
<label class="control-label" for="firstname">Name</label>
<input type="text" class="form-control required" id="firstname" name="firstname">
</div>
</div>
To achieve this, alter your JavaScript code to this:
<script type="text/javascript">
$('#myForm').on('submit', function(e) {
var firstName = $('#firstname');
// Check if there is an entered value
if(!firstName.val()) {
// Add errors highlight
firstName.closest('.form-group').removeClass('has-success').addClass('has-error');
// Stop submission of the form
e.preventDefault();
} else {
// Remove the errors highlight
firstName.closest('.form-group').removeClass('has-error').addClass('has-success');
}
});
</script>

div in boot strap...
<div class="form-group">
<div class="row">
<label class="col-xs-2 col-sm-2 control-label">city:</label>
<div class="col-xs-3 col-sm-3 formGroups"
id="city_form1">
<form:input name="city" class="form-control"
placeholder="City" data-toggle="tooltip"
data-placement="bottom" title="City" maxlength="15" />
<small class="help-block col-sm-offset-0 col-sm-9"
style="display: none;">city must require</small>
</div>
</div>
</div>
as you see there is .help-block is display: none now you write javascript function and check validation and if validation now pass make it display: block ... that's way you can do
enjoy with boot strap :)

its very easy
just apply class .has-error to div by javascript function
<div class="form-group has-error">
<div class="row">
<label class="col-xs-2 col-sm-2 control-label">city:</label>
<div class="col-xs-3 col-sm-3 formGroups"
id="city_form1">
<form:input name="city" class="form-control"
placeholder="City" data-toggle="tooltip"
data-placement="bottom" title="City" maxlength="15" />
</div>
</div>
</div>

Just use required inside the input field like this
<input type="text" class="form-control required" id="firstname" name="firstname" required/>