I am building a mobile web app with jQuery Mobile and I want to check if a checkbox is checked. Here is my code.
<script type=text/javascript>
function validate(){
if (remember.checked == 1){
alert("checked") ;
} else {
alert("You didn't check it! Let me check it for you.")
}
}
</script>
<input id="remember" name="remember" type="checkbox" onclick="validate()" />
But for some reason or another it doesn't execute it.
Please help !
----EDIT-----
This is what I have for the moment.
<DIV data-role="content" data-theme="g">
<DIV class=ui-grid-g-login>
<FORM method=post action=[$=PROBE(266)/] data-theme="C">
<P>~DATA_ERROR~</P>
<div id="mail" data-role="fieldcontain">
<label for="mail">Email:*</label>
<input id="mail" name="mail" type="email" />
</div>
<div id="pass" data-role="fieldcontain">
<label for="pass">Paswoord:*</label>
<input id="pass" name="pass" type="password" />
</div>
<div id="remember" data-role="fieldcontain">
<label for="remember">Onthoud mij</label>
<input id="remember" name="remember" type="checkbox" onclick="validate()" />
</div>
<P><INPUT class=btn name=submit value=Login type=submit onclick="validate()"></P>
</FORM>
</DIV>
</DIV><!-- /content -->
<script type=text/javascript>
function validate(){
var remember = document.getElementById('remember');
if (remember.checked){
alert("checked") ;
}else{
alert("You didn't check it! Let me check it for you.")
}
}
</script>
----EDIT--
Solved it, the problem was that the fieldcontain was also named 'remember'
checked is a boolean property, so you can directly use it in an if condition
<script type="text/javascript">
function validate() {
if (document.getElementById('remember').checked) {
alert("checked");
} else {
alert("You didn't check it! Let me check it for you.");
}
}
</script>
Try this:
function validate() {
var remember = document.getElementById("remember");
if (remember.checked) {
alert("checked");
} else {
alert("You didn't check it! Let me check it for you.");
}
}
Your script doesn't know what the variable remember is. You need to get the element first using getElementById().
//HTML
<input type="checkbox" id="someID">
// JavaScript
const someCheckbox = document.getElementById('someID');
someCheckbox.addEventListener('change', e => {
if(e.target.checked === true) {
console.log("Checkbox is checked - boolean value: ", e.target.checked)
}
if(e.target.checked === false) {
console.log("Checkbox is not checked - boolean value: ", e.target.checked)
}
});
know more
This should allow you to check if element with id='remember' is 'checked'
if (document.getElementById('remember').is(':checked')
use like this
<script type=text/javascript>
function validate(){
if (document.getElementById('remember').checked){
alert("checked") ;
} else {
alert("You didn't check it! Let me check it for you.")
}
}
</script>
<input id="remember" name="remember" type="checkbox" onclick="validate()" />
If you are using this form for mobile app then you may use the required attribute html5.
you dont want to use any java script validation for this. It should work
<input id="remember" name="remember" type="checkbox" required="required" />
Use this below simple code:
https://jsfiddle.net/Divyesh_Patel/v7a4h3kr/7/
<input type="checkbox" id="check">
click
<button onclick="check()">button</button>
<script>
function check() {
if (document.getElementById('check').checked) {
alert("checked");
} else {
alert("Not checked.");
}
}
</script>
if (document.getElementById('remember').checked) {
alert("checked");
}
else {
alert("You didn't check it! Let me check it for you.");
}
This should work
function validate() {
if ($('#remeber').is(':checked')) {
alert("checked");
} else {
alert("You didn't check it! Let me check it for you.");
}
}
I am using this and it works for me with Jquery:
Jquery:
var checkbox = $('[name="remember"]');
if (checkbox.is(':checked'))
{
console.log('The checkbox is checked');
}else
{
console.log('The checkbox is not checked');
}
Is very simple, but work's.
Regards!
remember is undefined … and the checked property is a boolean not a number.
function validate(){
var remember = document.getElementById('remember');
if (remember.checked){
alert("checked") ;
}else{
alert("You didn't check it! Let me check it for you.")
}
}
You can use this simple and effective code using pure JS and jQuery.
using validate function as onclick attr
function validate(el) {
if (el.checked) {
alert("checked")
} else {
alert("unchecked")
}
}
<input id="remember" name="remember" type="checkbox" onclick="validate(this)" />
OR
using pure JS
document.addEventListener("DOMContentLoaded", function(event) {
//using pure Js code
let chk = document.getElementById("remember");
if (chk.checked) {
alert("checked")
}else{
alert("unchecked")
}
})
<input id="remember" name="remember" type="checkbox"/>
using jQuery
$(document).ready(function () {
//using jQuery code
$('#remember').on('change', function (e) {
if (e.currentTarget.checked) {
alert("checked")
} else {
alert("unchecked")
}
})
})
<input id="remember" name="remember" type="checkbox"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
Use this below simple code:
https://jsfiddle.net/Divyesh_Patel/v7a4h3kr/7/
<input type="checkbox" id="check">
click
<button onclick="check()">
button
</button>
<script>
function check() {
if (document.getElementById('check').checked) {
alert("checked");
} else {
alert("You didn't check it! Let me check it for you.");
}
}
</script>
The remember variable is undefined. so try this way:
function validate() {
var remember = document.getElementById("remember");
if (remember.checked) {
alert("checked");
} else {
alert("You didn't check it! Let me check it for you.");
}
}
You can try this:
if ($('#remember').is(':checked')){
alert('checked');
}else{
alert('not checked')
}
Try This
<script type="text/javascript">
window.onload = function () {
var input = document.querySelector('input[type=checkbox]');
function check() {
if (input.checked) {
alert("checked");
} else {
alert("You didn't check it.");
}
}
input.onchange = check;
check();
}
</script>
You can also use JQuery methods to accomplish this:
<script type="text/javascript">
if ($('#remember')[0].checked)
{
alert("checked");
}
</script>
The below will definitely work. updated 2022
<input onchange="isChecked()" type="checkbox" required="required"/>
<script type="text/javascript">
let ischeckvariable = false;
function isChecked() {
if (!ischeckvariable) {
ischeckvariable = true;
} else {
isckeckvariable = false;
}
}
</script>
Related
I am building a mobile web app with jQuery Mobile and I want to check if a checkbox is checked. Here is my code.
<script type=text/javascript>
function validate(){
if (remember.checked == 1){
alert("checked") ;
} else {
alert("You didn't check it! Let me check it for you.")
}
}
</script>
<input id="remember" name="remember" type="checkbox" onclick="validate()" />
But for some reason or another it doesn't execute it.
Please help !
----EDIT-----
This is what I have for the moment.
<DIV data-role="content" data-theme="g">
<DIV class=ui-grid-g-login>
<FORM method=post action=[$=PROBE(266)/] data-theme="C">
<P>~DATA_ERROR~</P>
<div id="mail" data-role="fieldcontain">
<label for="mail">Email:*</label>
<input id="mail" name="mail" type="email" />
</div>
<div id="pass" data-role="fieldcontain">
<label for="pass">Paswoord:*</label>
<input id="pass" name="pass" type="password" />
</div>
<div id="remember" data-role="fieldcontain">
<label for="remember">Onthoud mij</label>
<input id="remember" name="remember" type="checkbox" onclick="validate()" />
</div>
<P><INPUT class=btn name=submit value=Login type=submit onclick="validate()"></P>
</FORM>
</DIV>
</DIV><!-- /content -->
<script type=text/javascript>
function validate(){
var remember = document.getElementById('remember');
if (remember.checked){
alert("checked") ;
}else{
alert("You didn't check it! Let me check it for you.")
}
}
</script>
----EDIT--
Solved it, the problem was that the fieldcontain was also named 'remember'
checked is a boolean property, so you can directly use it in an if condition
<script type="text/javascript">
function validate() {
if (document.getElementById('remember').checked) {
alert("checked");
} else {
alert("You didn't check it! Let me check it for you.");
}
}
</script>
Try this:
function validate() {
var remember = document.getElementById("remember");
if (remember.checked) {
alert("checked");
} else {
alert("You didn't check it! Let me check it for you.");
}
}
Your script doesn't know what the variable remember is. You need to get the element first using getElementById().
//HTML
<input type="checkbox" id="someID">
// JavaScript
const someCheckbox = document.getElementById('someID');
someCheckbox.addEventListener('change', e => {
if(e.target.checked === true) {
console.log("Checkbox is checked - boolean value: ", e.target.checked)
}
if(e.target.checked === false) {
console.log("Checkbox is not checked - boolean value: ", e.target.checked)
}
});
know more
This should allow you to check if element with id='remember' is 'checked'
if (document.getElementById('remember').is(':checked')
use like this
<script type=text/javascript>
function validate(){
if (document.getElementById('remember').checked){
alert("checked") ;
} else {
alert("You didn't check it! Let me check it for you.")
}
}
</script>
<input id="remember" name="remember" type="checkbox" onclick="validate()" />
If you are using this form for mobile app then you may use the required attribute html5.
you dont want to use any java script validation for this. It should work
<input id="remember" name="remember" type="checkbox" required="required" />
Use this below simple code:
https://jsfiddle.net/Divyesh_Patel/v7a4h3kr/7/
<input type="checkbox" id="check">
click
<button onclick="check()">button</button>
<script>
function check() {
if (document.getElementById('check').checked) {
alert("checked");
} else {
alert("Not checked.");
}
}
</script>
if (document.getElementById('remember').checked) {
alert("checked");
}
else {
alert("You didn't check it! Let me check it for you.");
}
This should work
function validate() {
if ($('#remeber').is(':checked')) {
alert("checked");
} else {
alert("You didn't check it! Let me check it for you.");
}
}
I am using this and it works for me with Jquery:
Jquery:
var checkbox = $('[name="remember"]');
if (checkbox.is(':checked'))
{
console.log('The checkbox is checked');
}else
{
console.log('The checkbox is not checked');
}
Is very simple, but work's.
Regards!
remember is undefined … and the checked property is a boolean not a number.
function validate(){
var remember = document.getElementById('remember');
if (remember.checked){
alert("checked") ;
}else{
alert("You didn't check it! Let me check it for you.")
}
}
You can use this simple and effective code using pure JS and jQuery.
using validate function as onclick attr
function validate(el) {
if (el.checked) {
alert("checked")
} else {
alert("unchecked")
}
}
<input id="remember" name="remember" type="checkbox" onclick="validate(this)" />
OR
using pure JS
document.addEventListener("DOMContentLoaded", function(event) {
//using pure Js code
let chk = document.getElementById("remember");
if (chk.checked) {
alert("checked")
}else{
alert("unchecked")
}
})
<input id="remember" name="remember" type="checkbox"/>
using jQuery
$(document).ready(function () {
//using jQuery code
$('#remember').on('change', function (e) {
if (e.currentTarget.checked) {
alert("checked")
} else {
alert("unchecked")
}
})
})
<input id="remember" name="remember" type="checkbox"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
Use this below simple code:
https://jsfiddle.net/Divyesh_Patel/v7a4h3kr/7/
<input type="checkbox" id="check">
click
<button onclick="check()">
button
</button>
<script>
function check() {
if (document.getElementById('check').checked) {
alert("checked");
} else {
alert("You didn't check it! Let me check it for you.");
}
}
</script>
The remember variable is undefined. so try this way:
function validate() {
var remember = document.getElementById("remember");
if (remember.checked) {
alert("checked");
} else {
alert("You didn't check it! Let me check it for you.");
}
}
You can try this:
if ($('#remember').is(':checked')){
alert('checked');
}else{
alert('not checked')
}
Try This
<script type="text/javascript">
window.onload = function () {
var input = document.querySelector('input[type=checkbox]');
function check() {
if (input.checked) {
alert("checked");
} else {
alert("You didn't check it.");
}
}
input.onchange = check;
check();
}
</script>
You can also use JQuery methods to accomplish this:
<script type="text/javascript">
if ($('#remember')[0].checked)
{
alert("checked");
}
</script>
The below will definitely work. updated 2022
<input onchange="isChecked()" type="checkbox" required="required"/>
<script type="text/javascript">
let ischeckvariable = false;
function isChecked() {
if (!ischeckvariable) {
ischeckvariable = true;
} else {
isckeckvariable = false;
}
}
</script>
I am building a mobile web app with jQuery Mobile and I want to check if a checkbox is checked. Here is my code.
<script type=text/javascript>
function validate(){
if (remember.checked == 1){
alert("checked") ;
} else {
alert("You didn't check it! Let me check it for you.")
}
}
</script>
<input id="remember" name="remember" type="checkbox" onclick="validate()" />
But for some reason or another it doesn't execute it.
Please help !
----EDIT-----
This is what I have for the moment.
<DIV data-role="content" data-theme="g">
<DIV class=ui-grid-g-login>
<FORM method=post action=[$=PROBE(266)/] data-theme="C">
<P>~DATA_ERROR~</P>
<div id="mail" data-role="fieldcontain">
<label for="mail">Email:*</label>
<input id="mail" name="mail" type="email" />
</div>
<div id="pass" data-role="fieldcontain">
<label for="pass">Paswoord:*</label>
<input id="pass" name="pass" type="password" />
</div>
<div id="remember" data-role="fieldcontain">
<label for="remember">Onthoud mij</label>
<input id="remember" name="remember" type="checkbox" onclick="validate()" />
</div>
<P><INPUT class=btn name=submit value=Login type=submit onclick="validate()"></P>
</FORM>
</DIV>
</DIV><!-- /content -->
<script type=text/javascript>
function validate(){
var remember = document.getElementById('remember');
if (remember.checked){
alert("checked") ;
}else{
alert("You didn't check it! Let me check it for you.")
}
}
</script>
----EDIT--
Solved it, the problem was that the fieldcontain was also named 'remember'
checked is a boolean property, so you can directly use it in an if condition
<script type="text/javascript">
function validate() {
if (document.getElementById('remember').checked) {
alert("checked");
} else {
alert("You didn't check it! Let me check it for you.");
}
}
</script>
Try this:
function validate() {
var remember = document.getElementById("remember");
if (remember.checked) {
alert("checked");
} else {
alert("You didn't check it! Let me check it for you.");
}
}
Your script doesn't know what the variable remember is. You need to get the element first using getElementById().
//HTML
<input type="checkbox" id="someID">
// JavaScript
const someCheckbox = document.getElementById('someID');
someCheckbox.addEventListener('change', e => {
if(e.target.checked === true) {
console.log("Checkbox is checked - boolean value: ", e.target.checked)
}
if(e.target.checked === false) {
console.log("Checkbox is not checked - boolean value: ", e.target.checked)
}
});
know more
This should allow you to check if element with id='remember' is 'checked'
if (document.getElementById('remember').is(':checked')
use like this
<script type=text/javascript>
function validate(){
if (document.getElementById('remember').checked){
alert("checked") ;
} else {
alert("You didn't check it! Let me check it for you.")
}
}
</script>
<input id="remember" name="remember" type="checkbox" onclick="validate()" />
If you are using this form for mobile app then you may use the required attribute html5.
you dont want to use any java script validation for this. It should work
<input id="remember" name="remember" type="checkbox" required="required" />
Use this below simple code:
https://jsfiddle.net/Divyesh_Patel/v7a4h3kr/7/
<input type="checkbox" id="check">
click
<button onclick="check()">button</button>
<script>
function check() {
if (document.getElementById('check').checked) {
alert("checked");
} else {
alert("Not checked.");
}
}
</script>
if (document.getElementById('remember').checked) {
alert("checked");
}
else {
alert("You didn't check it! Let me check it for you.");
}
This should work
function validate() {
if ($('#remeber').is(':checked')) {
alert("checked");
} else {
alert("You didn't check it! Let me check it for you.");
}
}
I am using this and it works for me with Jquery:
Jquery:
var checkbox = $('[name="remember"]');
if (checkbox.is(':checked'))
{
console.log('The checkbox is checked');
}else
{
console.log('The checkbox is not checked');
}
Is very simple, but work's.
Regards!
remember is undefined … and the checked property is a boolean not a number.
function validate(){
var remember = document.getElementById('remember');
if (remember.checked){
alert("checked") ;
}else{
alert("You didn't check it! Let me check it for you.")
}
}
You can use this simple and effective code using pure JS and jQuery.
using validate function as onclick attr
function validate(el) {
if (el.checked) {
alert("checked")
} else {
alert("unchecked")
}
}
<input id="remember" name="remember" type="checkbox" onclick="validate(this)" />
OR
using pure JS
document.addEventListener("DOMContentLoaded", function(event) {
//using pure Js code
let chk = document.getElementById("remember");
if (chk.checked) {
alert("checked")
}else{
alert("unchecked")
}
})
<input id="remember" name="remember" type="checkbox"/>
using jQuery
$(document).ready(function () {
//using jQuery code
$('#remember').on('change', function (e) {
if (e.currentTarget.checked) {
alert("checked")
} else {
alert("unchecked")
}
})
})
<input id="remember" name="remember" type="checkbox"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
Use this below simple code:
https://jsfiddle.net/Divyesh_Patel/v7a4h3kr/7/
<input type="checkbox" id="check">
click
<button onclick="check()">
button
</button>
<script>
function check() {
if (document.getElementById('check').checked) {
alert("checked");
} else {
alert("You didn't check it! Let me check it for you.");
}
}
</script>
The remember variable is undefined. so try this way:
function validate() {
var remember = document.getElementById("remember");
if (remember.checked) {
alert("checked");
} else {
alert("You didn't check it! Let me check it for you.");
}
}
You can try this:
if ($('#remember').is(':checked')){
alert('checked');
}else{
alert('not checked')
}
Try This
<script type="text/javascript">
window.onload = function () {
var input = document.querySelector('input[type=checkbox]');
function check() {
if (input.checked) {
alert("checked");
} else {
alert("You didn't check it.");
}
}
input.onchange = check;
check();
}
</script>
You can also use JQuery methods to accomplish this:
<script type="text/javascript">
if ($('#remember')[0].checked)
{
alert("checked");
}
</script>
The below will definitely work. updated 2022
<input onchange="isChecked()" type="checkbox" required="required"/>
<script type="text/javascript">
let ischeckvariable = false;
function isChecked() {
if (!ischeckvariable) {
ischeckvariable = true;
} else {
isckeckvariable = false;
}
}
</script>
I want to disable submit button when 4 input fields are nulls
<input type="text" name="val1" id="val1">
<input type="text" name="val2" id="val2">
<input type="text" name="val3" id="val3">
<input type="text" name="val4" id="val4">
submit button
<input name="contact" type="submit" id="contact" value="Update" style="padding:5px" class="sendButton" disabled />
I am using
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.sendButton').attr('disabled',true);
$('#val1').keyup(function(){
if($(this).val().length !=0){
$('.sendButton').attr('disabled', false);
}
else
{
$('.sendButton').attr('disabled', true);
}
})
$('#val2').keyup(function(){
if($(this).val().length !=0){
$('.sendButton').attr('disabled', false);
}
else
{
$('.sendButton').attr('disabled', true);
}
})
$('#val3').keyup(function(){
if($(this).val().length !=0){
$('.sendButton').attr('disabled', false);
}
else
{
$('.sendButton').attr('disabled', true);
}
})
$('#val4').keyup(function(){
if($(this).val().length !=0){
$('.sendButton').attr('disabled', false);
}
else
{
$('.sendButton').attr('disabled', true);
}
})
});
</script>
I think I am using wrongly. I put all ids in one function.
$('#val1','#val2','#val3','#val4').keyup(function(){
this code is not working . any suggestion. how to use & and condition(val1 &val2 & val3 &val4) in these function?.
The way I would try and solve this is like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$("#val1").keyup(function(event) {
validateInputs();
});
$("#val2").keyup(function(event) {
validateInputs();
});
$("#val3").keyup(function(event) {
validateInputs();
});
$("#val4").keyup(function(event) {
validateInputs();
});
function validateInputs(){
var disableButton = false;
var val1 = $("#val1").val();
var val2 = $("#val2").val();
var val3 = $("#val3").val();
var val4 = $("#val4").val();
if(val1.length == 0 || val2.length == 0 || val3.length == 0 || val4.length == 0)
disableButton = true;
$('.sendButton').attr('disabled', disableButton);
}
</script>
This way you will have a single place for checking your logic and not having to maintain it at N number of places if you diced to add more inputs later. And also a bit better solution would be to give your inputs the same class so you could do something like
$(".myInputs").keyup(function(event){
validateInputs();
});
Here is a jsFiddle example: https://jsfiddle.net/moj2dnup/
You could use the pattern attribute you would also need to use the required attribute otherwise an input field with an empty value will be excluded from constraint validation. This will prevent your form from being submitted, however, it won't disable your button.
Example:
<input pattern=".{5,}" required title="5 character minimum">
<input pattern=".{5,10}" required title="between 5 and 10 characters">
$(document).ready(function(){
$('.sendButton').attr('disabled',true);
$('.txtValues').keyup(function(){
var checkNull=false;
$('.txtValues').each(function(index,input){
if($(this).val().length !=0)checkNull=true;
});
if(checkNull){
$('.sendButton').attr('disabled', false);
}else{
$('.sendButton').attr('disabled', true);
}
});
});
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="text" name="val1" id="val1" class="txtValues">
<input type="text" name="val2" id="val2" class="txtValues">
<input type="text" name="val3" id="val3" class="txtValues">
<input type="text" name="val4" id="val4" class="txtValues">
<input name="contact" type="submit" id="contact" value="Update" style="padding:5px" class="sendButton" disabled />
Use a common css class for all inputs. Loop through inputs using $.each and check all values are null.
I've around 100 input fields with class name questionOrder. I have to check if user given any duplicate entry on the form input.
Currently trying something similar like this:
$('.questionOrder').on('input', function(){
var inp = this.value;
$('.questionOrder').each(function(){
if(inp==this.value){
console.log('match');
}else{
console.log('not match');
}
})
})
Problem here when inputting on a field it also checking it with itself
Try to remove this element from the selector with not() like:
$('.questionOrder').not(this).each(function(){
Working Code Example:
$('.questionOrder').on('input', function(){
var inp = this.value;
$('.questionOrder').not(this).each(function(){
if(inp==this.value){
console.log('match');
}else{
console.log('not match');
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="questionOrder" value="first"/>
<input type="text" class="questionOrder" value="second"/>
<input type="text" class="questionOrder" value="third"/>
<input type="text" class="questionOrder"/>
You can try siblings function -
$('.questionOrder').on('input', function(){
var inp = this.value;
$(this).siblings().each(function(){
if(inp==this.value){
console.log('match');
}else{
console.log('not match');
}
})
})
Alternative answer in pure DOM with event delegation ( without jQuery)
document.body.addEventListener('input', function(event) {
var target = event.target;
switch (true) {
case target.matches('.questionOrder'):
var questions = Array.from(document.querySelectorAll('.questionOrder'))
.forEach(function(q) {
if (q != target) {
if (target.value == q.value) console.log('match');
else console.log('not match');
}
})
return false;
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="questionOrder" value="first" />
<input type="text" class="questionOrder" value="second" />
<input type="text" class="questionOrder" value="third" />
<input type="text" class="questionOrder" />
I am not good enough with javascript. Simply I have a form with some input fields. The user has to fill in at least one of them. I had already found the right code to do this. This code tells the user there is an error using an alert message. But I want to make all input fields borders red instead of this alert message using the same code.
HTML
<form id="myform" action="" method="post">
<input name="destination" class="form-control" type="text" >
<input name="thingstodo" class="form-control" type="text">
<input name="gsearch" class="form-control" type="text">
<button type="submit" name="search">Search</button>
</form>
JavaScript
$(function(){
$("#myform").submit(function(){
var valid=0;
$(this).find('input[type=text]').each(function(){
if($(this).val() != "") valid+=1;
});
if(valid){
return true;
}
else {
alert("error: you must fill in at least one field");
return false;
}
});
});
Thanks
You can do it by setting the CSS style. This is done most easily with jQuery syntax.
$(function(){
$("#myform").submit(function(){
var valid = 0;
$(this).find('input[type=text]').each(function(){
if($(this).val() != "") {
valid++;
$(this).css("border-color", "initial");
}
else {
$(this).css("border-color", "red");
}
});
if (valid > 0) { return true; }
else { return false; }
});
});
Modify the code like so
$(function(){
$("#myform").submit(function(){
var valid=0;
$(this).find('input[type=text]').each(function(){
if($(this).val() != "") valid+=1;
else
$(this).style.border = "solid 1px red"
});
if(valid){
return true;
}
else {
return false;
}
});
});
How about this ?
$(function(){
$("#myform").submit(function(){
var dirty = false;
$('input[type=text]').each(function(){
if($(this).val().length){
dirty = true;
}
});
if(!dirty){
$('input[type=text]').each(function(){
$(this).css('border','1px solid red');
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform" action="" method="post">
<input name="destination" class="form-control" type="text" >
<input name="thingstodo" class="form-control" type="text">
<input name="gsearch" class="form-control" type="text">
<button type="submit" name="search">Search</button>
</form>