Develop Reference

Not able to highlight the input fields if left empty

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.

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 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());
});
});

To give a message regarding the users input in html textarea in jQuery/javascript

I want to make a user put input in tag and want to give him a message when he/she clicks the submit button that whether his/her input was right or wrong using jQuery/javascript.
eg: i ask them to write in the textarea and if their input is what i asked the answer should be success else failed, using jQuery/javascript.
Javascript beginner.
Thanks

Maybe this sample can get you going:
HTML:
<textarea id="text"></textarea>
<input type="submit" id="submit" value="button" />
JavaScript:
(function () {
var textarea = $('#textarea');
$('#submit').on('click', function (event) {
var value = textarea.val();
event.preventDefault();
if (value === 'value you want it to be') {
alert('yes');
} else {
alert('no');
}
});
}());
Of course you haven't given a lot of details but maybe this can get you started?

If you want check whether a user fill a field:
html:
<form action="#">
<input id="firstName" name="" type="text">
<input id="lastName" name="" type="text">
<input type="submit" value="submit" id="sub"></form>
</form>
jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('form').on('submit',function(){
$("input[type='text']").each(function(){
var long=$(this).val().length
if(long==0){
var id=$(this).attr('id')
alert('you must fill the '+id+' field')
}
})
})
})
</script>

Try this
<input type="text" value="some text">
<p></p>
<script>
$( "input" ).keyup(function() {
var value = $( this ).val();
if (value === 'value you want it to be') {
$( "p" ).text("Correct");
} else {
$( "p" ).text("Wrong");
}
})
.keyup();
</script>

html form with multiple submitbuttons

I have 2 submit buttons in an HTML form.
How can I know which submit button has triggered the JavaScript function?
<script language="javascript" type="text/javascript">
function verifyData(formdata) {
// Here I want to know from which submit button this function is triggered
// I can't use type button instead of submit
// I can't use onclick handler
// I can't use JQuery.. I want to do only with javascript
}
</script>
<form onsubmit="verifyData(this);" method="post">
<input type="submit" value="submit1">
<input type="submit" value="submit2">
</form>
<button value="delete row" id="but1" onclick="disps()">delete row</button>
I want to do different actions based on the different submit buttons clicked.

It is not possible to check the button clicked through the onsubmit event. Instead move the call to verifyData() to the onclick handler of each button. Use return in the onclick call to cancel submission if false is returned by verifyData()
<script language="javascript" type="text/javascript">
function verifyData(button) {
// validate
switch (button.value) {
case "submit1":
// do somehting
break;
case "submit2":
// do somehting
break;
// ...
};
// submit the form
return true;
}
</script>
<form method="post">
<input type="submit" value="submit1" onclick="return verifyData(this);">
<input type="submit" value="submit2" onclick="return verifyData(this);">
</form>

How about putting an onclick event handler on both buttons which will set a variable to say which button was clicked?
like so:
<script language="javascript" type="text/javascript">
function verifyData(formdata) {
alert(btnClicked);
// Here I want to know from which submit button this function is triggered
// I can't use type button instead of submit
}
var btnClicked = 0;
function setSubmit(which) {
btnClicked = which; return true;
}
</script>
<form onsubmit="verifyData(this);" method="post">
<input type="submit" value="submit1" onclick="return setSubmit(1);">
<input type="submit" value="submit2" onclick="return setSubmit(2);">
</form>

Are you allowed to use the jQuery library?
If you can using this you can easily bind to each submit button based on an id.
For example:
<form id="form1" method="post">
<input type="submit" value="submit1" id="submit1">
<input type="submit" value="submit2" id="submit2" >
</form>
<script type="text/javascript">
$("#submit1").click(function(e)
{
// Do stuff when 1 is clicked.
$("#form1").submit();
});
$("#submit2").click(function(e)
{
// Do stuff when 2 is clicked.
$("#form1").submit();
});
</script>
you could also have the buttons as a type of button to avoid any issues, but you should be able to simply return false; to stop the button of type submit from... submitting

Here is how I would do it... Firstly I would use jQuery so you must include that in your document like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
It would also mean your HTML can be simplified to:
<form method="post">
<input type="submit" value="submit1"/>
<input type="submit" value="submit2"/>
</form>
Then you can use jQuery:
<script>
// When the document is ready
$(function(){
// Action performed when a submit button in the form is clicked
$("form[type='submit']").click(function(e){
// Get the value attribute
var val = $(this).val(),
validation_has_passed = false;
// If it is submit1
if(val == "submit1") {
// Validate submit 1
validation_has_passed = true;
// If it is submit2
} else if(val == "submit2") {
// Validate submit 2
validation_has_passed = true;
}
// If all validation is OK submit the form
if(validation_has_passed === true) {
$("form").submit();
}
// Ensure pressing these buttons doesn't submit the form
e.preventDefault();
});
});
</script>