Not able to highlight the input fields if left empty - javascript

I have a form which gets submitted normally, now I have 2 requirement that needs to be completed on click of submit button, if these requirements are completed then the data needs to get saved in database
1) Border of the input boxes get highlighted if input boxes are left empty
2) If the image upload is left empty, a written message below the upload button should appear saying that the image is missing
3) The form should not get submitted till all input boxes and image upload are filled
4) Would also appreciate if someone could tell how I can use this code for all input boxes together instead of using separately for each one
Currently when I click on submit button, if the box is empty it highlights the input but after that submits the form also and the image message is also not appearing
Form Code
<form action="<?php echo base_url(); ?>profile/add_profile" method="post" >
<input id="user" type="text" />
<input id="pwd" type="text" />
<input type="file" class="form-control modalcontrol" name="profile_img" id="profile_img" required>
<span class="fileuploadlabl">Upload</span>
<div class="login-btn">
<button type="submit" class="btn btn-primary" name="submit" >SUBMIT</button>
</div>
</form>
Script Code
<script>
$( document ).ready(function() {
$(".login-btn").click(function(){
var user = $("#user").val();
var pwd = $("#pwd").val();
if(!user){
$("#user").addClass("makeRed");
}
else
{
$("#user").removeClass("makeRed");
}
if(!pwd){
$("#pwd").addClass("makeRed");
}
else
{
$("#pwd").removeClass("makeRed");
}
});
$("#user").click(function(){
$("#user").removeClass("makeRed");
});
$("#pwd").click(function(){
$("#pwd").removeClass("makeRed");
});
});
</script>
CSS Code
.makeRed{
border: 2px solid red !important;
}

You need to simply iterate all the inputs to validate them (comments inline)
$( document ).ready(function() {
$(".login-btn").click(function(){
$( "input, select" ).each( function(){ //iterate all inputs
var $this = $( this );
var value = $this.val();
$this.removeClass( "makeRed" ); //reset the class first
if ( value.length == 0 )
{
$this.addClass( "makeRed" ); //add if input is empty
}
});
});
$( "input,select" ).focus( function(){
$( this ).removeClass( "makeRed" ); //on focus of the input remove the markRed class
})
});
$(document).ready(function() {
$(".login-btn").click(function() {
$("input, select").each(function() { //iterate all inputs
var $this = $(this);
var value = $this.val();
$this.removeClass("makeRed"); //reset the class first
if (value.length == 0) {
$this.addClass("makeRed"); //add if input is empty
}
});
if ( $(".makeRed").length > 0 )
{
alert( "Some validation errors" );
}
});
$("input,select").focus(function() {
$(this).removeClass("makeRed"); //on focus of the input remove the markRed class
})
});
.makeRed
{
border-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input id="user" type="text" />
<input id="pwd" type="text" />
<input type="file" class="form-control modalcontrol" name="profile_img" id="profile_img" required>
<span class="fileuploadlabl">Upload</span>
<div class="login-btn">
<button type="submit" class="btn btn-primary" name="submit">SUBMIT</button>
</div>
</form>

$(document).ready(function(){
/**** When you click on input text element - remove class 'makered' -- Start *****/
$("form input").focus(function(){
$(this).removeClass('makeRed');
});
/**** When you click on input text element - remove class 'makered' -- Ends *****/
/**** While submit, if form is not valid, add error line and do not allow to submit, else allow submit -- Starts *****/
$("form").submit(function() { //validate on submit
var isError = false;
$(this).find('input').each(function(){
if(!($(this).val()))
{
$(this).addClass('makeRed');
isError = true;
}
else
$(this).removeClass('makeRed');
});
if(isError)
return false; // do not submit the form
});
/**** While submit, if form is not valid, add error line and do not allow to submit, else allow submit -- Ends *****/
And remove required attribute from input type file tag.
This will validate your form while submit, not while click, so the better solution instead of validating on click.

Related

js active button when number of input is 10 characters

I want to make a disabled button changed into active button automatically using js when the number of input is 10 character in the input field.
<input type="text" class="form-control" name="client_phone1" placeholder="01**********">
<button type="submit" formaction="{{url('/client-mobile-login')}}" disabled class="mobile-login__button">CONTINUE
</button>
in this input field number of character is 10 then the submit button will active actomatically
what will be the js code?
first add event listener to the input, then check if the value is equal to 10 and disable the button.
<input type="text" name="Thing" id="Thing" value="" />
<button type="submit" formaction="{{url('/client-mobile-login')}}" id='mybtn' class="mobile-login__button">CONTINUE
</button>
window.onload = function() {
/* event listener */
document.getElementById("Thing").addEventListener('keyup', doThing);
/* function */
function doThing() {
console.log(this.value)
if (this.value.length === 10) {
document.getElementById("mybtn").disabled = true;
} else {
document.getElementById("mybtn").disabled = false;
}
}
}
Edit: Example on JSFiddle JSFiddle

Add text only once after input on form submit

I'm trying to add some text on submit after the form's input value changes. I only want it to add it once but my code adds it every time the input is clicked.
Codepen: https://codepen.io/okass/pen/KbvvjL
<form>
<input id="input-1" type="submit" value="submit">
</form>
$(document).ready(function() {
$("form").submit(function(e) {
var txt = $(':input[type="submit"]');
txt.val("sorry for the wait")
txt.after("text to add")
e.preventDefault();
});
});
You can maintain a variable by setting true/false, if the value is true then add text otherwise not:
$(document).ready(function() {
var flag = true;
$("form").submit(function(e) {
var txt = $(':input[type="submit"]');
txt.val("sorry for the wait")
if(flag){
txt.after("text to add");
flag = false;
}
e.preventDefault();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input id="input-1" type="submit" value="submit">
</form>

empty check for multiple form in a page separately

I have two forms (consist with input,textarea,checkbox) in a page. I want check emptiness of these forms separately on click seperate button.
I use the following script. But it shows empty message if any of these form input is empty.
$('#submit').click(function(e) {
var empty = false;
$('input, textarea').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
alert("empty");
e.preventDefault();
}
else {
document.getElementById("contact").submit();
}
})()
Never assign stuff to submit buttons
Do not submit a form from a submit button if you have chosen to use preventDefault if something wrong. It could submit the form twice
$(function() {
// on the submit event NOT the button click
$('form').on("submit", function(e) { // any form - use .formClass if necessary to specific forms
var empty = false;
$("input, textarea", this).each(function() { // this form's inputs incl submit
if ($.trim($(this).val()) == "") { // trim it too
console.log(this.name,"empty")
empty = true;
return false; // no need to continue
}
});
if (empty) {
alert(this.id + " is empty"); // or set a class on the div
e.preventDefault(); // cancel submission
}
});
});
div {
border: 1px solid black;
width:500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form id="form1">
<div>
<input type="text" value="" name="field1" /><br/>
<textarea name="field2"></textarea><br/>
<input type="submit" value="Submit" />
</div>
</form>
<hr/>
<form id="form2">
<div>
<input type="text" value="" name="field3" /><br/>
<textarea name="field4"></textarea><br/>
<input type="submit" value="Submit" />
</div>
</form>
You could also add required to the fields
You need to restrain the handler to the form containing the clicked button:
$('#submit').click(function(e) {
var form = $(this).parents('form:first');
var empty = false;
$('input, textarea', form).each(function() {
// the rest is the same
I'd also like to point out that you cannot have the same ID on multiple controls, so
$('#submit')
should always return exactly one button. You should do something like this, where you distinguish the buttons by class instead:
<input type="submit" id="submitA" class="submitButton">
<input type="submit" id="submitB" class="submitButton">
and select with
$('.submitButton')
you know you can also use jquery to reset the form like so
form.resetForm();

How to disable a button when the input field is empty? [duplicate]

I have this HTML:
<input type="text" name="textField" />
<input type="submit" value="send" />
How can I do something like this:
When the text field is empty the submit should be disabled (disabled="disabled").
When something is typed in the text field to remove the disabled attribute.
If the text field becomes empty again(the text is deleted) the submit button should be disabled again.
I tried something like this:
$(document).ready(function(){
$('input[type="submit"]').attr('disabled','disabled');
$('input[type="text"]').change(function(){
if($(this).val != ''){
$('input[type="submit"]').removeAttr('disabled');
}
});
});
…but it doesn't work. Any ideas?
The problem is that the change event fires only when focus is moved away from the input (e.g. someone clicks off the input or tabs out of it). Try using keyup instead:
$(document).ready(function() {
$(':input[type="submit"]').prop('disabled', true);
$('input[type="text"]').keyup(function() {
if($(this).val() != '') {
$(':input[type="submit"]').prop('disabled', false);
}
});
});
$(function() {
$(":text").keypress(check_submit).each(function() {
check_submit();
});
});
function check_submit() {
if ($(this).val().length == 0) {
$(":submit").attr("disabled", true);
} else {
$(":submit").removeAttr("disabled");
}
}
This question is 2 years old but it's still a good question and it was the first Google result, but all of the existing answers recommend setting and removing the HTML attribute (removeAttr("disabled")) "disabled", which is not the right approach. There is a lot of confusion regarding attribute vs. property.
HTML
The "disabled" in <input type="button" disabled> in the markup is called a boolean attribute by the W3C.
HTML vs. DOM
Quote:
A property is in the DOM; an attribute is in the HTML that is parsed into the DOM.
https://stackoverflow.com/a/7572855/664132
jQuery
Related:
Nevertheless, the most important concept to remember about the checked attribute is that it does not correspond to the checked property. The attribute actually corresponds to the defaultChecked property and should be used only to set the initial value of the checkbox. The checked attribute value does not change with the state of the checkbox, while the checked property does. Therefore, the cross-browser-compatible way to determine if a checkbox is checked is to use the property.
Relevant:
Properties generally affect the dynamic state of a DOM element without changing the serialized HTML attribute. Examples include the value property of input elements, the disabled property of inputs and buttons, or the checked property of a checkbox. The .prop() method should be used to set disabled and checked instead of the .attr() method.
$( "input" ).prop( "disabled", false );
Summary
To [...] change DOM properties such as the [...] disabled state of form elements, use the .prop() method.
(http://api.jquery.com/attr/)
As for the disable on change part of the question: There is an event called "input", but browser support is limited and it's not a jQuery event, so jQuery won't make it work. The change event works reliably, but is fired when the element loses focus. So one might combine the two (some people also listen for keyup and paste).
Here's an untested piece of code to show what I mean:
$(document).ready(function() {
var $submit = $('input[type="submit"]');
$submit.prop('disabled', true);
$('input[type="text"]').on('input change', function() { //'input change keyup paste'
$submit.prop('disabled', !$(this).val().length);
});
});
To remove disabled attribute use,
$("#elementID").removeAttr('disabled');
and to add disabled attribute use,
$("#elementID").prop("disabled", true);
Enjoy :)
or for us that dont like to use jQ for every little thing:
document.getElementById("submitButtonId").disabled = true;
eric, your code did not seem to work for me when the user enters text then deletes all the text. i created another version if anyone experienced the same problem. here ya go folks:
$('input[type="submit"]').attr('disabled','disabled');
$('input[type="text"]').keyup(function(){
if($('input[type="text"]').val() == ""){
$('input[type="submit"]').attr('disabled','disabled');
}
else{
$('input[type="submit"]').removeAttr('disabled');
}
})
It will work like this:
$('input[type="email"]').keyup(function() {
if ($(this).val() != '') {
$(':button[type="submit"]').prop('disabled', false);
} else {
$(':button[type="submit"]').prop('disabled', true);
}
});
Make sure there is an 'disabled' attribute in your HTML
We can simply have if & else .if suppose your input is empty we can have
if($(#name).val() != '') {
$('input[type="submit"]').attr('disabled' , false);
}
else we can change false into true
you can also use something like this :
$(document).ready(function() {
$('input[type="submit"]').attr('disabled', true);
$('input[type="text"]').on('keyup',function() {
if($(this).val() != '') {
$('input[type="submit"]').attr('disabled' , false);
}else{
$('input[type="submit"]').attr('disabled' , true);
}
});
});
here is Live example
For form login:
<form method="post" action="/login">
<input type="text" id="email" name="email" size="35" maxlength="40" placeholder="Email" />
<input type="password" id="password" name="password" size="15" maxlength="20" placeholder="Password"/>
<input type="submit" id="send" value="Send">
</form>
Javascript:
$(document).ready(function() {
$('#send').prop('disabled', true);
$('#email, #password').keyup(function(){
if ($('#password').val() != '' && $('#email').val() != '')
{
$('#send').prop('disabled', false);
}
else
{
$('#send').prop('disabled', true);
}
});
});
Here's the solution for file input field.
To disable a submit button for file field when a file is not chosen, then enable after the user chooses a file to upload:
$(document).ready(function(){
$("#submitButtonId").attr("disabled", "disabled");
$("#fileFieldId").change(function(){
$("#submitButtonId").removeAttr("disabled");
});
});
Html:
<%= form_tag your_method_path, :multipart => true do %><%= file_field_tag :file, :accept => "text/csv", :id => "fileFieldId" %><%= submit_tag "Upload", :id => "submitButtonId" %><% end %>
If the button is itself a jQuery styled button (with .button()) you will need to refresh the state of the button so that the correct classes are added / removed once you have removed/added the disabled attribute.
$( ".selector" ).button( "refresh" );
The answers above don't address also checking for menu based cut/paste events. Below's the code that I use to do both. Note the action actually happens with a timeout because the cut and past events actually fire before the change happened, so timeout gives a little time for that to happen.
$( ".your-input-item" ).bind('keyup cut paste',function() {
var ctl = $(this);
setTimeout(function() {
$('.your-submit-button').prop( 'disabled', $(ctl).val() == '');
}, 100);
});
Disable: $('input[type="submit"]').prop('disabled', true);
Enable: $('input[type="submit"]').removeAttr('disabled');
The above enable code is more accurate than:
$('input[type="submit"]').removeAttr('disabled');
You can use both methods.
Vanilla JS Solution. It works for a whole form not only one input.
In question selected JavaScript tag.
HTML Form:
var form = document.querySelector('form')
var inputs = form.querySelectorAll('input')
var required_inputs = form.querySelectorAll('input[required]')
var register = document.querySelector('input[type="submit"]')
form.addEventListener('keyup', function(e) {
var disabled = false
inputs.forEach(function(input, index) {
if (input.value === '' || !input.value.replace(/\s/g, '').length) {
disabled = true
}
})
if (disabled) {
register.setAttribute('disabled', 'disabled')
} else {
register.removeAttribute('disabled')
}
})
<form action="/signup">
<div>
<label for="username">User Name</label>
<input type="text" name="username" required/>
</div>
<div>
<label for="password">Password</label>
<input type="password" name="password" />
</div>
<div>
<label for="r_password">Retype Password</label>
<input type="password" name="r_password" />
</div>
<div>
<label for="email">Email</label>
<input type="text" name="email" />
</div>
<input type="submit" value="Signup" disabled="disabled" />
</form>
Some explanation:
In this code we add keyup event on html form and on every keypress check all input fields. If at least one input field we have are empty or contains only space characters then we assign the true value to disabled variable and disable submit button.
If you need to disable submit button until all required input fields are filled in - replace:
inputs.forEach(function(input, index) {
with:
required_inputs.forEach(function(input, index) {
where required_inputs is already declared array containing only required input fields.
I had to work a bit to make this fit my use case.
I have a form where all fields must have a value before submitting.
Here's what I did:
$(document).ready(function() {
$('#form_id button[type="submit"]').prop('disabled', true);
$('#form_id input, #form_id select').keyup(function() {
var disable = false;
$('#form_id input, #form_id select').each(function() {
if($(this).val() == '') { disable = true };
});
$('#form_id button[type="submit"]').prop('disabled', disable);
});
});
Thanks to everyone for their answers here.
Please see the below code to enable or disable Submit button
If Name and City fields has value then only Submit button will be enabled.
<script>
$(document).ready(function() {
$(':input[type="submit"]').prop('disabled', true);
$('#Name').keyup(function() {
ToggleButton();
});
$('#City').keyup(function() {
ToggleButton();
});
});
function ToggleButton() {
if (($('#Name').val() != '') && ($('#City').val() != '')) {
$(':input[type="submit"]').prop('disabled', false);
return true;
} else {
$(':input[type="submit"]').prop('disabled', true);
return false;
}
} </script>
<form method="post">
<div class="row">
<div class="col-md-4">
<h2>Getting started</h2>
<fieldset>
<label class="control-label text-danger">Name</label>
<input type="text" id="Name" name="Name" class="form-control" />
<label class="control-label">Address</label>
<input type="text" id="Address" name="Address" class="form-control" />
<label class="control-label text-danger">City</label>
<input type="text" id="City" name="City" class="form-control" />
<label class="control-label">Pin</label>
<input type="text" id="Pin" name="Pin" class="form-control" />
<input type="submit" value="send" class="btn btn-success" />
</fieldset>
</div>
</div>
</form>
take look at this snippet from my project
$("input[type="submit"]", "#letter-form").on("click",
function(e) {
e.preventDefault();
$.post($("#letter-form").attr('action'), $("#letter-form").serialize(),
function(response) {// your response from form submit
if (response.result === 'Redirect') {
window.location = response.url;
} else {
Message(response.saveChangesResult, response.operation, response.data);
}
});
$(this).attr('disabled', 'disabled'); //this is what you want
so just disabled the button after your operation executed
$(this).attr('disabled', 'disabled');
Al types of solution are supplied. So I want to try for a different solution. Simply it will be more easy if you add a id attribute in your input fields.
<input type="text" name="textField" id="textField"/>
<input type="submit" value="send" id="submitYesNo"/>
Now here is your jQuery
$("#textField").change(function(){
if($("#textField").val()=="")
$("#submitYesNo").prop('disabled', true)
else
$("#submitYesNo").prop('disabled', false)
});
Try
let check = inp=> inp.nextElementSibling.disabled = !inp.value;
<input type="text" name="textField" oninput="check(this)"/>
<input type="submit" value="send" disabled />
I Hope below code will help someone ..!!! :)
jQuery(document).ready(function(){
jQuery("input[type=submit]").prop('disabled', true);
jQuery("input[name=textField]").focusin(function(){
jQuery("input[type=submit]").prop('disabled', false);
});
jQuery("input[name=textField]").focusout(function(){
var checkvalue = jQuery(this).val();
if(checkvalue!=""){
jQuery("input[type=submit]").prop('disabled', false);
}
else{
jQuery("input[type=submit]").prop('disabled', true);
}
});
}); /*DOC END*/

How to prevent submitting search form when search field is empty?

Here the code below disables search button when search box is empty. When input type for search button is set to submit then neither submit nor the enter key from keyboard submits empty form but when I change input type to button and put the cursor inside input field and press enter button even empty form is posted causing reloading of page. How to prevent submitting search form on pressing enter when search field is empty?
<form action="search.php" method="post">
<input type="text" class="search" placeholder="search here"/>
<input type="submit" class="Button" value="search"/>
</form>
<script>
$(document).ready(function(){
$('.Button').attr('disabled',true);
$('.search').keyup(function(){
if($(this).val().length !=0)
$('.Button').attr('disabled', false);
else
$('.Button').attr('disabled',true);
})
});
</script>
Add a event listener for the form submission
$('form').submit(function(e){
// check logic here
if ($('.search').val().length < 1)
e.preventDefault()
});
where e.preventDefault will avoid the form being submitted if no value
otherwise the form will submitted normally
here is your code with some modification:
JsFiddle Demo
$(document).ready(function(){
// By default submit is disabled
$('.Button').prop('disabled', true);
$('.search').keyup(function() {
if($(this).val().length !=0 ) {
$('.Button').prop('disabled', false);
} else {
$( ".search").focus();
$('.Button').prop('disabled', true);
e.preventDefault();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="search.php" method="post">
<input type="text" class="search" placeholder="search here"/>
<input type="submit" class="Button" value="search"/>
</form>
JsFiddle Demo
You can try like this
$('form').submit(function(e){
if ($('.search').val().length<=0)
return false;
});
you should use prop instead of attr if you want to change disabled
$(function() {
$('.Button').prop('disabled', true);
$('.search').keyup(function() {
$('.Button').prop('disabled', !$(this).val());
});
});

Categories

Resources