In my application I have five textboxes.
When submit button click I want to validate these textboxes.
Validation should be at least 3 textboxes should have value in it.
Old way is using jQuery each loop we can check but is there any other way to do it ?
$("#submitBtn").on("click", function(){
var count = 0;
$(".textboxesDiv input").each(function () {
if($(this).val() != "" && $(this).val() != null && $(this).val() != undefined){
count++;
}
});
if(count > 2 )
{
alert("3 or more");
}
else{
alert("lessa than 3");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="textboxesDiv">
<input type="text" id="textbox1" >
<input type="text" id="textbox2" >
<input type="text" id="textbox3" >
<input type="text" id="textbox4" >
<input type="text" id="textbox5" >
</div>
<input type="submit" id ="submitBtn" name="button"/>
https://jsfiddle.net/7Lmgbbng/1/
Check this example
http://jsfiddle.net/ggChris/mfbaxkfp/
<input id="AccountText" type="text" name="AccountText" value="" class="form-control" placeholder="Name" required=''/>
<input class="button" type="submit" value="submit">
$(document).ready(function(){
$('.button').click(function(){
if ($('input#AccountText').val() == ""){
alert('Please complete the field');
}
});
});
or you can use jquery validation
https://jqueryvalidation.org/
Related
I am trying to set up a form validation - this works - but only for odd numbers, if you enter an even number, e.g. part number TEST and quantity 2 then the alert will come up, if you enter qty 3 then the form will submit. Any ideas ?
Javascript
<script type="text/javascript">
function allnumeric(inputtxt)
{
var numbers = /^[0-9]+$/;
if(form2.qty.value.match(numbers) & (form2.product.value != ""))
{
return true;
}
else
{
alert('Please input numeric characters only or fill in the product field')
{
return false;
}
}
}
</script>
Form
<form id="form2" name="form2" method="post" action="booking-printlabel2.asp?insert=yes" onsubmit="return allnumeric()">
<input name="product" type="text" id="product" style="height:55px;font-size:30pt;" size="10"/>
<input name="qty" type="text" id="qty" style="height:55px;font-size:30pt;" size="3"/>
<input type="submit" name="Print Labels2" id="Print Labels2" value="Print Labels" style="height:55px;font-size:30pt;"/>
</form>
Thanks all - it was the typo, if(form2.qty.value.match(numbers) & (form2.product.value != "")) changed to if(form2.qty.value.match(numbers) && (form2.product.value != "")) and it now works.
Assuming you're targeting html5:
<input name="qty" type="number" id="qty" style="height:55px;font-size:30pt;"/>
Or if you really want to have type="text":
<input name="qty" type="text" id="qty" pattern="\d+" style="height:55px;font-size:30pt;"/>
Also, you've got a typo:
if(form2.qty.value.match(numbers) & (form2.product.value != ""))
should be
if(form2.qty.value.match(numbers) && (form2.product.value != ""))
Inside of your if condition you have to add one more if condition to check the odd and even number. You have to do this:
if(form2.qty.value.match(numbers) & (form2.product.value != ""))
{
var num = form2.qty.value;
if(num%2 == 0) {
alert('Even number');
} else {
return true;
}
}
function allnumeric(inputtxt)
{
var numbers = /^[0-9]+$/;
var qty = form2.qty.value;
if(qty.match(numbers) && (form2.product.value != ""))
{
if(qty & 1) // even number
return true;
else
alert('Even number');
return false;
}
else
{
alert('Please input numeric characters only or fill in the product field')
return false;
}
}
<form id="form2" name="form2" method="post" action="booking-printlabel2.asp?insert=yes" onsubmit="return allnumeric()">
<input name="product" type="text" id="product" style="height:55px;font-size:30pt;" size="10"/>
<input name="qty" type="text" id="qty" style="height:55px;font-size:30pt;" size="3"/>
<input type="submit" name="Print Labels2" id="Print Labels2" value="Print Labels" style="height:55px;font-size:30pt;"/>
</form>
I need your help,
Is there a way one can possible use the all so powerful jQuery to validate the following conditions before enabling button?
If the user inputs a value in the text box and then checks one of the checkboxes, then enable the button
If the user already has a value present in the text, and then checks one of the checkboxes, then enable the button
How can this be written in jQuery, from my perspective this would some lenghty form field checking no?
Here's the HTML markup:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="button" value="Add To Calendar" disabled>
<br>
<input type="checkbox" name="dategroup"><input type="text" id="date1">
<br>
<input type="checkbox" name="dategroup"><input type="text" id="date2">
<br>
<input type="checkbox" name="dategroup"><input type="text" id="date3">
</body>
</html>
This might get you started. You can make the field validation as complex or simple as you wish.
$('input[type=checkbox]').click(function(){
var tmp = $(this).next('input').val();
//validate tmp, for example:
if (tmp.length > 1){
//alert('Text field has a value');
$('#mybutt').prop('disabled',false);
}else{
//alert('Please provide a long value in text field');
$('#mybutt').prop('disabled', true);
$(this).prop('checked',false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="mybutt" type="button" value="Add To Calendar" disabled>
<br>
<input type="checkbox" name="dategroup"><input type="text" id="date1">
<br>
<input type="checkbox" name="dategroup"><input type="text" id="date2">
<br>
<input type="checkbox" name="dategroup"><input type="text" id="date3">
Try this way..
$('input').on('change input', function() {
$input = $('input');
$button = $('input[type="button"]');
var arr = [];
$input.each(function() {
if ($(this).attr('type') !== 'button') {
arr.push(check($(this)));
arr.indexOf(false) == -1 ? $button.removeAttr('disabled') : $button.attr('disabled', 'disabled');
}
})
})
function check(elem) {
if ($(elem).attr('type') == 'checkbox' && $(elem).is(':checked')) return true;
if ($(elem).attr('type') == 'text' && $(elem).val().trim().length) return true;
return false;
}
$('input').on('change input', function() {
$input = $('input');
$button = $('input[type="button"]');
var arr = [];
$input.each(function() {
if ($(this).attr('type') !== 'button') {
arr.push(check($(this)));
arr.indexOf(false) == -1 ? $button.removeAttr('disabled') : $button.attr('disabled', 'disabled');
}
})
})
function check(elem) {
if ($(elem).attr('type') == 'checkbox' && $(elem).is(':checked')) return true;
if ($(elem).attr('type') == 'text' && $(elem).val().trim().length) return true;
return false;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="Add To Calendar" disabled>
<br>
<input type="checkbox" name="dategroup">
<input type="text" id="date1">
<br>
<input type="checkbox" name="dategroup">
<input type="text" id="date2">
<br>
<input type="checkbox" name="dategroup">
<input type="text" id="date3">
I have a form that has series of checkboxes. When the other checkbox is selected an alert appears if you don't fill in the other textbox.
If I select more than one checkbox it doesn't validate at all?
<form>
<div id="form-2" class="pages active" data-page="form-2" style="display: block;">
<p>Please indicate below the quality issue(s) you were not happy with. Pick as many options as apply. <span class="required">*</span></p>
<input type="checkbox" name="qual-form-2[]" value="test">
<input type="checkbox" name="qual-form-2[]" value="test">
<input type="checkbox" name="qual-form-2[]" value="test">
<input type="checkbox" name="qual-form-2[]" value="test">
<input type="checkbox" name="qual-form-2[]" value="test">
<input type="checkbox" name="qual-form-2[]" value="test">
<input type="checkbox" name="qual-form-2[]" value="test">
<input type="checkbox" name="qual-form-2[]" value="test">
<input type="checkbox" name="qual-form-2[]" value="test">
<input type="checkbox" name="qual-form-2[]" value="test">
<input type="checkbox" name="qual-form-2[]" value="test">
<input type="checkbox" name="qual-form-2[]" value="Other, please specify in the box below">
<input type="text" name="qual-form-other-form-2" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false">
<button class="next-page" data-page-id="form-2">Next</button>
</div>
</form>
<script>
if (pageCurrent.data('page') == 'form-2') {
var answer = pageCurrent.find('input[name="qual-form-2[]"]:checked').val();
if ( (answer == 'Other, please specify in the box below') && ($('input[name="qual-form-other-form-2"]').val().length > 0)) {
$('input[name="qual-form-other-form-2"]').removeClass('empty');
return true;
} else if ( (answer == 'Other, please specify in the box below') && (!$('input[name="qual-form-other-form-2"]').val().length > 0)) {
alert('Please specify other');
$('input[name="qual-form-other-form-2"]').addClass('empty');
return false;
} else if ( (answer == 'Other, please specify in the box below') && (!$('input[name="qual-form-other-form-2"]').val().length > 0) && ($('input[name="qual-form-2[]').is(":checked"))) {
alert('Please specify other');
$('input[name="qual-form-other-form-2"]').addClass('empty');
return false;
} else if ($('input[name="qual-form-2[]').is(":checked")) {
return true;
} else {
alert('Validation errors occurred. Please confirm the fields and submit it again.');
}
}
</script>
Try this : change your button type="button" and call below script.
$(function(){
$('.next-page').click(function(){
var checkCount = $('input[name="qual-form-2[]"]:checked').length;
//check atleast one checkbox checked
if(checkCount > 0)
{
var checkOther = $('input[name="qual-form-2[]"]:last');
var checkNotOther = $('input[name="qual-form-2[]"]:checked').not(checkOther);
//if 'other' and any of the rest is checked show alert
if(checkNotOther.length > 0 && checkOther.is(':checked'))
{
$('input[name="qual-form-other-form-2"]').addClass('empty');
alert('Please select either "Other" or another checkbox');
}
//if other checked and input is empty show alert
else if(checkOther.is(':checked') && $('input[name="qual-form-other-form-2"]').val() == "")
{
$('input[name="qual-form-other-form-2"]').addClass('empty');
alert('Please specify other');
}
else
{
alert('Validation Succeeded');
}
}
else
{
alert('Please check atleast one checkbox');
}
});
});
JSFiddle Demo
I´m working in a payment gateway where the user Name the Price for my digital books. An input box (to text the price) and a "Pay now" button are displayed. BUT:
If the price is less than 0.50 the payment button disapear and the download button appear
If the user introduce a "," instead a "." a box is displayed (please, enter a valid number)
Here is the form with the input box:
<form id="hikashop_paypal_form" name="hikashop_paypal_form" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="X" />
<input type="hidden" name="item_name_1" value="X" />
<input id="amount_1" name="amount_1" class="amount_1"/></form>
Pay Now button (it should be hiden if 1 is true)
<div id="PayNow" class="PayNow">
<input id="PayNow_button" type="submit" class="btn btn-primary" value="Pay now" name="" />
</div>
Download Now Button (it should be shown if 1 is true)
<div id="downloadNow" class="downloadNow">
Download now
</div>
Info box (It should be shown if 2 is true)
<div id="info" class="info">
Enter a valid number
</div>
And the question is: How can I do it?
I supose the solution passes by using javascript, but I don´t know how exactly... Thanks for you time...
I don´t know how, but it works for me:
Try it here: IBIZA! Book Download
<form id="pplaunch" action="https://www.paypal.com/cgi-bin/webscr" method="POST">
<input type="hidden" name="cmd" value="_xclick">
<input id="issueid" name="issueid" type="hidden" value="ARCHIVE NAME">
<input type="hidden" id="currency" name="currency" value="EUR">
<input type="hidden" name="business" value="YOUR PAYPAL ID" />
<input type="hidden" value="0" name="test_ipn"></input>
<input type="hidden" name="item_name" value="PRODUC NAME">
<input type="hidden" value="1" name="no_shipping"></input>
<input type="hidden" value="0" name="no_note"></input>
<input type="hidden" value="utf-8" name="charset"></input>
<input type="hidden" value="Super" name="first_name"></input>
<input type="hidden" value="http://www.YOURWEBSITE.com/return" name="return"></input>
<input type="hidden" value="http://www.OURWEBSITE.com/cancel" name="cancel_return"></input>
<div class="nameprice" style="float:left;margin-right:15px;>
<span style="font-size:small;">Name your price: </span><input id="amount" name="amount" size="6" maxlength="5" type="text"> <span style="font-size:small;color:#ccc;">From 0.00€</span>
</div>
<div id="pricerror"></div>
<div class="buttonspace">
<button id="buybutton" class="buybutton" type="button">Checkout</button>
<div id="descargaGratisMensaje"></div>
<div style="display: block;" class="pay">
</div>
</div>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript">
function newPopup(url, width, height){
popupWindow = window.open(url,'_blank','height='+height+',width='+width+',left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes');
return false;
}
function displaybutton(displayclass){
if(displayclass == 'pay'){
$('.pay').css('display','block');
$('#pplaunch').attr('action', 'https://www.paypal.com/cgi-binwebscr');
$('#buybutton').html('Pagar');
}else{
$('.pay').css('display','none');
$('#pplaunch').attr('action', 'http://www.example.com/archive/'+$('#issueid').val());
$('#buybutton').html('Descargar');
$('#descargaGratisMensaje').html('Un Me Gusta podría ser un buen intercambio');
}
}
function isNumber(n){
return !isNaN(parseFloat(n)) && isFinite(n) && (n.search(/0x/i)<0);
}
function price(n){
// return null if n is not a price, or n rounded to 2 dec. places
if(!isNumber(n)){
// maybe the user entered a comma as a decimal separator
n = n.replace(/,/g,'.');
if(!isNumber(n)){
return null;
}
}
// now we know it is a number, round it up to 2 dec. places
return Math.round(parseFloat(n)*100)/100;
}
function pricecheck(){
var data = $.trim($('#amount').val());
var myprice = price(data);
if(myprice == null){
if(data == ''){
$('#pricerror').html('');
}else{
$('#pricerror').html('Please enter a price.');
}
displaybutton('pay');
return false;
}
if(myprice == 0){
$('#pricerror').html('');
displaybutton('nopay');
}else if(myprice < 0.5){
$('#pricerror').html('The minimum price is '+currencysymbol+'0.50.
Please enter either zero, or at least '+currencysymbol+'0.50.');
displaybutton('pay');
}else{
$('#pricerror').html('');
displaybutton('pay');
}
jQuery('.content').hide();
}
var currencysymbol = '$';
$.getScript('//www.geoplugin.ne/javascript.gp?ref=panelsyndicate.com', function() {
if(geoplugin_continentCode() != 'EU'){return;}
$('#currency').val('EUR');
currencysymbol = '€';
$('.currencysymbol').html(currencysymbol);
});
$(document).ready(function(){
var dialog = $('#modal').dialog({
title: 'IBIZA!'
, autoOpen: false
, closeText: ''
, modal: true
, resizable: false
, width: 500
});
$('#buybutton').click(function() {
$('#pplaunch').submit();
});
$('#pplaunch').submit(function() {
var myprice = price($.trim($('#amount').val()));
if((myprice != 0) && ((myprice == null) || (myprice < 0.5))){
$('#pricerror').html('Please enter your price.');
$('#amount').focus();
return false;
}
});
$('.modaltrigger').click(function() {
var issueid = $(this).attr('href').substr(1);
$('#issueid').val(issueid); // Comic ID
$('#include_a_message_to').html(issues[issueid].include_a_message_to); // Destinee of the message
dialog.dialog('option', 'title', issues[issueid].title); // Title of the comic
$('#issuelangs').html(issues[issueid].langs); // Languages in which the comic is available
dialog.dialog('option', 'position', { my: "center", at: "center", of: window });
dialog.dialog('open');
// prevent the default action, e.g., following a link
pricecheck();
return false;
});
$('#amount').bind('input propertychange', function() {
pricecheck();
});
$('.custommsg').hide();
$('.msgtrigger').click(function() {
var cmsg = $('.custommsg');
if(cmsg.is(':visible')){
cmsg.hide();
$('.sendmsg').show();
}else{
$('.sendmsg').hide();
cmsg.show();
$('.msgtxt').focus();
}
return false;
});
$('.msgtxt').keyup(function(){
if($(this).val().length > maxlength){
$(this).val($(this).val().substr(0, maxlength));
}
var remaining = maxlength - $(this).val().length;
$('#msgtxtnumcharsleft').text(remaining);
});
var maxlength = 200;
var remaining = maxlength - $('.msgtxt').val().length;
$('#msgtxtnumcharsleft').text(remaining);
});
</script>
I have a sample form with the following code (stripped for JSFiddle)
<input type="text" id="i1" />
<input type="text" id="i2" />
<input type="text" id="i3" />
<input type="text" id="e1"/>
<input type="text" id="e2" />
<input type="text" id="e3" />
<input type="button" id="submit" value="Submit">
The jQuery code follows (stripped for JSFiddle)
$("#e1").hide();
$("#e2").hide();
$("#e3").hide();
$("#submit").click(function(){
var a = $("#i1").val();
var b = $("#i2").val();
var c = $("#i3").val();
if (a == "" && b !== "" && c!=="") {
$("#e1").show();
} else if (a !== "" && b == "" && c=="") {
$("#e2").show();
$("#e3").show();
} else if (a !== "" && b !== "" && c=="") {
$("#e3").show();
}else if (a == "" && b == "" && c=="") {
$("#e1").show();
$("#e2").show();
$("#e3").show();
}
});
I am trying to validate the fields with possible combinations. It will show or hide the last three text fields (with id e*)accordingly if the fields are blank or not. For example, if the 1st field is empty and others are not, then e1 should be shown and others are hidden. Same of others like a typical form field were all fields are mandatory. If I write the above code, it is too long and complex. Is there any simple solution for this kind of scenario ?
Thanks
This will do what you want...
$(document).ready(function(){
$("#e1").hide();
$("#e2").hide();
$("#e3").hide();
$("#submit").click(function(){
$("input[id*=i]").each(function(i){
if($(this).val()=="") $("#e"+(i+1)).show();
else $("#e"+(i+1)).hide();
});
});
});
$(function(){
$("#e1").hide();
$("#e2").hide();
$("#e3").hide();
$("#submit").click(function(){
var a = $("#i1").val();
var b = $("#i2").val();
var c = $("#i3").val();
if (a == "") {
$("#e1").show();
}if (b == "") {
$("#e2").show();
}if (c == "") {
$("#e3").show();
}
});
})
<input type="text" id="i1" />
<input type="text" id="i2" />
<input type="text" id="i3" />
<input type="text" id="e1"/>
<input type="text" id="e2" />
<input type="text" id="e3" />
<input type="button" id="submit" value="Submit">
Demo