I need to allow user to enter value at only one box at a time.
For eg: if user enter months the days field should not allow him to enter value.
Can I disable the other field if user enter value in any of them ?
Also it only takes numbers.
Here is my html
<td class="ctext" width="13%"> Reset Frequency in Months/Days
</td>
<td class="ctext" style="display:inline-block">
<label for="frMnth" style="display:block">Month</label>
<input type="text" class="textfield" value="" id="frMnth" name="frMnth" onkeypress="return isNumber(event)" />
<label for="frDays" style="display:block">Days</label>
<input type="text" class="textfield" value="" id="frDays" name="frDays" onkeypress="return isNumber(event)" />
</td>
And this is script to type number only using Onkeypress.
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;}
Can I disable the field using Onkeypress ?
Try this:
http://jsfiddle.net/lotusgodkk/GCu2D/1011/
HTML:
<td class="ctext" width="13%"> Reset Frequency in Months/Days</td>
<td class="ctext" style="display:inline-block">
<label for="frMnth" style="display:block">Month</label>
<input type="text" class="textfield" value="" id="frMnth" name="frMnth" />
<label for="frDays" style="display:block">Days</label>
<input type="text" class="textfield" value="" id="frDays" name="frDays" />
</td>
JS:
$(document).ready(function() {
$(document).on("blur", ".textfield", function() {
var ele = $(this);
if (ele.val()) {
if (isNaN(ele.val())) {
alert("Only numbers please");
return false;
}
$(".textfield").not(this).attr("disabled", "disabled");
} else {
$(".textfield").removeAttr("disabled");
}
});
});
Alternative solution without JS
Demo: http://jsfiddle.net/lotusgodkk/GCu2D/1012/
HTML:
<td class="ctext" width="13%"> Reset Frequency in Months/Days</td>
<td class="ctext" style="display:inline-block">
<label for="frMnth" style="display:block">Month/Days</label>
<input type="number" class="textfield" value="" id="frMnth" name="frMnth" />
<select>
<option value="month">Month</option>
<option value="days">Days</option>
</select>
</td>
Change the input type to number. Let browser take care of the number onlyrequirement. Of course you can add JS for further validations.
Write JQuery
$(".textfield").keypress( function() {
if($("#frMnth").val().length > 0) {
$("#frDays").attr("disabled", "disabled");
}
else if($("#frDays").val().length > 0) {
$("#frMnth").attr("disabled", "disabled");
}
else {
$("#frMnth").removeAttr("disabled");
$("#frDays").removeAttr("disabled");
}
});
Related
I have 4 inputs on my page, and on a button onClick, i want to check, that all the inputs are filled with text.
<input type="text" value="" id="input1">
<input type="text" value="" id="input2">
<input type="text" value="" id="input3">
<input type="text" value="" id="input4">
What i want : Store all the required inputs ID in an array, and on click, check, that is there any input, that is empty.
How can i do this at the simplest way?
Use required tag instead as given below
<input type="text" value="" id="input1" required>
you can also try adding REGEX for more strict checking
// using Plain JavaScript
var input1= document.getElementById('input1').value;
if(input1 == "" ){
alert("Input 1 is Empty");
return false;
}
var input2 = document.getElementById('input2').value;
if(input12 == "" ){
alert("Input 2 is Empty");
return false;
}
var input3 = document.getElementById('input3').value;
if(input3 == "" ){
alert("Input 3 is Empty");
return false;
}
var input4 = document.getElementById('input4').value;
if(input4 == "" ){
alert("Input 4 is Empty");
return false;
}
just incase the required attribute fails.. you can do this..
add a validate function to the blur event, that is when the user leaves the field..
<input type="text" onblur="validate(this)" value="" id="input1">
<input type="text" onblur="validate(this)" value="" id="input2">
<input type="text" onblur="validate(this)" value="" id="input3">
<input type="text" onblur="validate(this)" value="" id="input4">
<button> ... </button>
and using jquery you can do this..
function validate(obj){
if($(obj).val() == ''){
alert('this Field cannot be empty');
$(obj).focus(); //send focus back to the object...
}
}
<input type="text" value="" id="input1">
<input type="text" value="" id="input2">
<input type="text" value="" id="input3">
<input type="text" value="" id="input4">
jQuery(function($){
var arr = [];
// number of input elements
var count = $("input").length;
// store list of input ids
$("buttonName").on('click', function(event) {
$("input").each(function(i){
var currId = $(this).attr('id');
arr.push(currId);
if ($(this).val()=="") {
alert(currId+": has no input");
}
});
});
});
for a class project I have to build a website for a pet store, featuring a pet grooming service. This involves a form, php and a mysql server on my localhost. I have been unable to correctly validate this form via a jQuery validator plugin for some unknown (to me) reason.
I've had no luck via regular jQuery code beyond getting the form to not submit blank input values. So as it is, anybody can put 'sadklfhsdk' in any of the fields (except for email, unless it has a '#') and it will validate and submit to the server.
So after I going through a couple of tutorials this is what I have so far:
The HTML:
<body>
<div id="h2Groom"><h2>Grooming Request Form</h2></div>
<form id="groom_form" method="post" action="insertPS.php">
<div id="result"></div>
<label for="firstName"><span>First Name:</span>
<input type="text" name="firstName" id="firstName" placeholder="Enter Your First Name" class="required"/>
</label>
<label for="lastName"><span>Last Name:</span>
<input type="text" name="lastName" id="lastName" placeholder="Enter Your Last Name" class="required"/>
</label>
<label for="email"><span>Email Address:</span>
<span id="error"></span>
<input type="email" name="email" id="email" placeholder="Enter a Email"/>
</label>
<label for="phone"><span>Phone Number:</span>
<span id="error"></span>
<input type="text" name="phone" id="phone" placeholder="Enter a phone number" class="required"/>
</label>
<label for="address"><span>Address:</span>
<input type="text" name="address" id="address" placeholder="Enter your address" class="required"/>
</label>
<label for="city"><span>City:</span>
<input type="text" name="city" id="city" placeholder="Enter your city" />
</label>
<label for="state"><span>State:</span>
<input type="text" name="state" id="state" placeholder="Enter your state" class="required"/>
</label>
<label for="zipcode"><span>Zipcode:</span>
<input type="text" name="zipcode" id="zipcode" placeholder="Enter your zipcode" class="required"/>
</label>
<label for="petType"><span>Type of Pet:</span>
<ul>
<li><label><input name="petType" type="radio" value="dog" id="dog">Dog</label></li>
<li><label><input name="petType" type="radio" value="cat" id="cat">Cat</label></li>
<li><label><input name="petType" type="radio" value="bird" id="bird">Bird</label></li>
</ul>
</label>
<select id="breed" name="breed">
<option value="0">--Please Choose Dog Breed--</option>
<option value="AlaskanMal">Alaskan Malamute</option>
<option value="Bichon">Bichon Frise</option>
<option value="WelshCorgi">Corgi, Welsh</option>
<option value="Dalmation">Dalmation</option>
<option value="EnglishToySpan">English Toy Spaniel</option>
<option value="FrenchBull">French Bull Dog</option>
<option value="Greyhound">Greyhound</option>
<option value="Papillon">Papillon</option>
<option value="Rottweiler">Rottweiler</option>
<option value="YorkshireTerr">Yorkshire Terrier</option>
</select>
<label for="neut"><span>Check box if your pet has been neutered/spayed (leave unchecked if not).</span></label>
<ul>
<label>
<li><input type="checkbox" name="neut" id="neut" />Yes</li></label>
</ul>
<br />
<br />
<br />
<label for="petname"><span>Pet Name:</span>
<input type="text" name="petname" id="petname" placeholder="Enter your pet's name" class="required" />
</label>
<label for="petBday"><span>Pet's Birthday:</span>
<input type="date" id="petBday" name="petBday"/>
</label>
<span> </span>
<input type="submit" id="submitBttn" value="Submit" /><input type="reset" id="resetBttn" value="Reset" />
</form>
</body>
The jQUERY (except the script to send values to server, see jsfiddle link):
$(document).ready(function() {
$('input[name=petType]').click(function() {
if(this.id=='dog') {
$('#breed').show('slow');
}
else {
$('#breed').hide('slow');
}
});
$('input[name=phone]').blur(function() {
if (validatePhone('phone')) {
$('#error').html('Valid');
$('#error').css('color', 'green');
}
else {
$('#error').html('Invalid');
$('#error').css('color', 'red');
}
});
$('input[name=email]').blur(function() {
if (validateEmail('email')) {
$('#error').html('Valid');
$('#error').css('color', 'green');
}
else {
$('#error').html('Invalid');
$('#error').css('color', 'red');
}
});
$("#submitBttn").click(function() {
//get input field values
var user_firstName = $('input[name=firstName]').val();
var user_lastName = $('input[name=lastName]').val();
var user_email = $('input[name=email]').val();
var user_address = $('input[name=address]').val();
var user_phone = $('input[name=phone]').val();
var user_city = $('input[name=city]').val();
var user_state = $('input[name=state]').val();
var user_zipcode = $('input[name=zipcode]').val();
var user_petname = $('input[name=petname]').val();
var checked_radio = $('input:radio[name=petType]').is(':checked');
var user_neut = $('input:checkbox[name=neut]').is(':checked');
var user_breed = $('input:select[name=breed]').is(':selected');
var txtVal = $('#petBday').val();
if(isDate(txtVal))
alert('Valid Date');
else
alert('Invalid Date');
var proceed = true;
//Validation functions, executed when user hits "submit"
function validatePhone(phone) {
var a = document.getElementById(phone).value;
var filter = /^[0-9-+]+$/;
if (filter.text(phone)) {
return true;
}
else {
return false;
}
}
function validateEmail(email) {
var filter = /^([\w-\.]+)#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
if (filter.test(email)) {
return true;
}
else {
return false;
}
}
function isDate(txtDate)
{
var currVal = txtDate;
if(currVal == '')
return false;
//declare regex
var rxDatePattern = /^(\d{1,2})(\/|-)(\d{1,2})(\/|-)(\d{4})$/;
var dtArray = currVal.match(rxDatePattern); //is the format ok?
if(dtArray ==null)
return false;
//checks for mm/dd/yyyy format
dtMonth = dtArray[1];
dtDay = dtArray[3];
dtYear = dtArray[5];
if(dtMonth < 1 || dtMonth > 12)
return false;
else if (dtDay < 1 || dtDay > 31)
return false;
else if ((dtMonth==4 || dtMonth==6 || dtMonth==9 || dtMonth==11) && dtDay ==31)
return false;
else if (dtMonth == 2)
{
var isleap = (dtYear % 4 == 0 && (dtYear % 100 != 0 || dtYear % 400 == 0));
if(dtDay > 29 || (dtDay ==29 && !isleap))
return false;
}
return true;
}
EDIT: corrected if(filter.text()) to if(filter.test(phone)). None of my java validation code works.
validatePhone: filter.text should be spelled test
Some one help me out in javacript validations for the form below where it should check no numbers/numericals shoud be there in fname and lname,
stnumber shoud have specific size (size)
state and pincode should match
is it possible with javascript validations?????
<form id="user" method="post" action="" onsubmit="return validateForm()">
<span>First Name:</span>
<input type="text" class="input" id="fname" name="fname" required>
<span>Last Name</span>
<input type="text" class="input" id="lname" name="lname" required>
<span>Student Number</span>
<input type="text" class="input" id="stn" name="stn" required>
<span>Student address</span>
<input type="text" class="input" id="stad" name="stad" required>
<span>Town/suburb</span>
<input type="text" class="input" id="town" name="town" required>
<span>State</span>
<select name="state" id="state">
<option selected>--select--</option>
<option>AAA</option>
<option>BBB</option>
</select>
<span>Postal Code</span>
<input type="text" class="input" id="pcode" name="pcode" required>
I really don't understand the question but if you want user to enter a "specific" size, why don't you just use
maxlength="size"
property?
EDIT:
Javascript Part
function isCharKey(evt){
var charCode = (evt.which) ? evt.which : event.keyCode
return !(charCode < 31 && (charCode > 48 || charCode < 57));
}
var state= document.getElementById("state").value;
var pcode= document.getElementById("pcode").value;
if (state != pcode) {
alert("State and Pcode doesn't match");
}
in your html
<input type="text" class="input" id="fname" name="fname" required onkeypress="return isCharKey(event);">
<input type="text" class="input" id="lname" name="lname" required onkeypress="return isCharKey(event);">
<input type="text" class="input" id="stn" name="stn" required maxlength="10">
That should do it for entering only characters but not numbers
EDIT 2:
<script type="text/javascript">
function isCharKey(evt){
var charCode = (evt.which) ? evt.which : event.keyCode
return !(charCode < 31 && (charCode > 48 || charCode < 57));
}
function validateForm() {
var state= document.getElementById("state").value;
var pcode= document.getElementById("pcode").value;
if (state != pcode) {
alert("State and Pcode doesn't match");
}
}</script>
Write this at the bottom of your page
If your project allowes you to, you could go for HTML5 validation using specific HTML5 attributes such as required, min, max and pattern. See more information on W3Schools.com and html5pattern.com
If Javascript is a requirement, there's an ample selection of validation libraries out there such as jQuery Validate or Parsley that are perfectly capable of doing what you want to achieve.
I have following script running on my site. Users have to enter "testnumber" which is 10 character long. There is a length check validation. When users click on submit button my script does work smoothly.
But the problem is that when users press the enter key instead of mouse click, it does not warn the users. How can i change it so that when the users press the enter key this script will give the same message as they click on submit button?
<script type="text/javascript">
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
function formvalidation(form) {
var isSubmitting = false;
var value = document.getElementById('testnumber').value;
if (value.length == 10) {
if (isNumber(value)) {
isSubmitting = true;
}
}
if (isSubmitting) {
form.submit();
}
else {
alert('testnumber must be at least 10 character.');
return false;
}
}
</script>
This is the part of the html code:
<tr>
<td align="center">
<label>
<div align="left">
<span class="text7"><strong>enter testnumber:</strong></span>
<input name="testnumber" type="text" id="testnumber" size="50" value="<%=(testnumber)%>" />
<input name="search" id="search" type="button" class="normalmail" value="Search" onclick="formvalidation(frmSearch);" />
</div>
</label>
</td>
</tr>
Hope this will help
<from onsubmit="return formvalidation()">
<tr>
<td align="center">
<label>
<div align="left">
<span class="text7"><strong>enter testnumber:</strong></span>
<input name="testnumber" type="text" id="testnumber" size="50" value="<%=(testnumber)%>" />
<input name="search" id="search" type="button" class="normalmail" value="Search" onclick="formvalidation(frmSearch);" />
</div>
</label>
</td>
<!-- </tr></tr> -->
</form>
Your Script
<script type="text/javascript">
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
function formvalidation() {
var isSubmitting = false;
var value = document.getElementById('testnumber').value;
if (value.length > 10 && value.length < 10) {
alert('testnumber must be at least 10 character.');
return false
}
else if (isSubmitting) {
return true
}
else {
return false;
}
}
</script>
<input type="text" id="search" size="25" autocomplete="off"/>
I know it is something with
onkeydown="if (event.keyCode == 27)
Declare a function which will be called when a key is pressed:
function onkeypressed(evt, input) {
var code = evt.charCode || evt.keyCode;
if (code == 27) {
input.value = '';
}
}
And the corresponding markup:
<input type="text" id="search" size="25" autocomplete="off"
onkeydown="onkeypressed(event, this);" />
<input type="text" value="" onkeyup="if ( event.keyCode == 27 ) this.value=''" />
This should work.
$('input[type=text]').each(function (e) {
$(this).keyup(function (evt) {
var code = evt.charCode || evt.keyCode;
if (code == 27) {
$(this).val('');
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" autofocus value="input data" placeholder="ESC button clear" style="padding:5px;">
<p>Hit esc button to see result</p>
function keyPressed(evt) {
if (evt.keyCode == 27) {
//clear your textbox content here...
document.getElementById("search").value = '';
}
}
Then in your input tag...
<input type="text" onkeypress="keyPressed(event)" id="search" ...>