I have used below code to get value from textarea and I am not able to get it.
Given is the code for the textarea which is dynamic:
<form name="myForm">
<textarea name="fname" <%#!((GPNS.BusinessLayer.SpecialItems.SpecialItem)Container.DataItem).Code.Equals("OTH", StringComparison.InvariantCultureIgnoreCase) ? "style='display: none;'" : string.Empty%> id="text<%#((GPNS.BusinessLayer.SpecialItems.SpecialItem)Container.DataItem).ID%>" maxlength="50" placeholder="Enter other item details"></textarea>
</form>
Given is my function to get value from textarea box:
function ValidateData() {
if ($("textarea").is(":visible")) {
//var x = document.forms["myForm"]["fname"].value;
var x = document.getElementsByName("fname").value;
if (x == null || x == "") {
alert("Please Enter Other Item Details");
return false;
}
}
else return true
}
You can use this code for get textarea:
function ValidateData() {
if ($("textarea").is(":visible")) {
var x = $("textarea").val();
if (x == null || x == "") {
alert("Please Enter Other Item Details");
return false;
}
}
else return true
}
Related
i have javascript that validate every user input and only allow character to be inputed in input text.
my issue is im using input text with no submit button (search form). my javascript doesn't allow hotkey enter, here my code :
function getkey(e)
{
if (window.event)
return window.event.keyCode;
else if (e)
return e.which;
else
return null;
}
function angkadanhuruf(e, goods, field)
{
var angka, karakterangka;
angka = getkey(e);
if (angka == null) return true;
karakterangka = String.fromCharCode(angka);
karakterangka = karakterangka.toLowerCase();
goods = goods.toLowerCase();
// check goodkeys
if (goods.indexOf(karakterangka) != -1)
return true;
// control angka
if ( angka==null || angka==0 || angka==8 || angka==9 || angka==27 )
return true;
if (angka == 13) {
var i;
for (i = 0; i < field.form.elements.length; i++)
if (field == field.form.elements[i])
break;
i = (i + 1) % field.form.elements.length;
field.form.elements[i].focus();
return false;
};
// else return false
return false;
}
<div class="search-box" style="margin-top: 20px;">
<form method="POST" id="searchform" action="search.html" >
<input name="kata" type="text" placeholder=" " onKeyPress="return angkadanhuruf(event,'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#.-_',this)"/>
</form>
</div>
I want to check if the value the user enter in one of my input. I want to check both that the value entered is neither an empty string or not a number. How do I do this, please?
const tempInput = parseInt(document.querySelector("#temp").value);
// this is my input
if (tempInput === '' || tempInput !== Nan){
code block
}
this is not working unfortunately!
Thanks!!
var theInput = document.getElementById("temp");
var regex = /(?:[A-Za-z].*?\d|\d.*?[A-Za-z])/;
theInput.addEventListener("keyup", function () {
if(theInput.value.length == 0){
console.log("Is empty");
} else if(!!theInput.value.match(regex)){
console.log("Both number and characters");
} else if(theInput.value.length > 0 && !isNaN(theInput.value)){
console.log("Number");
} else {
console.log("NOT a Number");
}
});
<input id="temp" type="text">
var value = document.getElementById("temp").value;
if(value.length > 0 && !isNaN(value))
{
//code
}
i have this javascript code which has a function that calls other functions. The problem is the input.html form is getting submitted even if the fields are empty.. if I dont provide any input in the fields, the error messages are being shown but at the same time form gets submitted. there are numerous questions like this available but none is helping as they are not calling function within the function.. what can be the possible solution for this?
function blankos() {
var p = document.getElementById("windows");
var q = document.getElementById("linux");
if ((p.checked == false) && (q.checked == false)) {
document.getElementById("enteros").innerHTML = "Select an option";
return false;
} else if ((p.checked == true) || (q.checked == true)) {
document.getElementById("enteros").innerHTML = "";
return true;
}
}
function blankfreq() {
var r = document.getElementById("biannual");
var s = document.getElementById("monthly");
if ((r.checked == false) && (s.checked == false)) {
document.getElementById("enterfreq").innerHTML = "Select an option";
return false;
} else if ((r.checked == true) || (s.checked == true)) {
document.getElementById("enterfreq").innerHTML = "";
return true;
}
}
function blankhour() {
var i = document.getElementById("one");
var ii = document.getElementById("two");
var iii = document.getElementById("four");
if ((i.checked == true) || (ii.checked == true) || (iii.checked == true)) {
document.getElementById("enterhour").innerHTML = "";
return true;
}
return false;
}
function blank() {
blankos();
blankfreq();
blankhour();
checkselect();
}
<form onSubmit="return blank()" name="input" id="input" method="post" action="cgi-bin/review.cgi" >
blank() doesn't return anything. Try:
function blank() {
return blankos() && blankfreq() && blankhour() && checkselect();
}
This will only report the first error that's detected. If you want all of them to be reported, assign them to variables first.
function blank() {
var ok1 = blankos();
var ok2 = blankfreq();
var ok3 = blankhour();
var ok4 = checkselect();
return ok1 && ok2 && ok3 && ok4;
}
I haven't looked at all the individual validation functions, though. You probably have bugs there that need to be fixed as well.
You can use preventDefault() to restrict your form from submitting. Change your HTML from
<form onSubmit="return blank()" name="input" id="input" method="post" action="cgi-bin/review.cgi" >
to
<form name="input" id="input" method="post" action="cgi-bin/review.cgi" >
Then add this block of code
//id of the form is 'input'
$("#input").submit(function(e){
//if any of the inner functions return false then prevent from form submit
if( !blankos() || !blankfreq() || !blankhour() || !checkselect()){
e.preventDefault();
return false;
}
});
I'm stumped. I'm trying to check to see if my input type:text is empty, or null, in my JavaScript. I currently have this:
if ($("#startDate").val().trim().length() === 0)
{
alert("Please fill out the required fields.");
}
I have tried: .val() === "", .val() == "", .length() === 0, .length() == 0, .length() < 1, .val().length() === 0, val().trim().length() < 1, .trim().length() < 1, .text() === "", .text() == "", !$("#startDate").val()
My HTML is:
<fieldset>
<label for="startDate_[pk]" style="display:block; width:100%;text-align:left">Start Time</label>
<input type="text" name="startDate_[pk]" id="startDate_[pk]" style="width:75px;display:inline" placeholder="pick date" />
##
<select name="startTime_[pk]" id="startTime_[pk]" style="display:inline;" disabled="disabled">
#{
var time = DateTime.Now.Date.AddHours(8);
for (int i = 480; i < 1260; i += 15)
{
<option value="#i">#DateTime.Now.Date.AddMinutes(i).ToShortTimeString()</option>
}
}
</select>
</fieldset>
I have also tried this:
$('input[class^="dateValidate"]').each(function () {
if($(this).val().trim().length === 0)
{
alert("Please fill out the required fields.");
}
I'm running out of ideas.
****Update****
The validation works for one selected object. But when you select more than one, the validation only works for the first object. Here's my code:
function validate()
{
var startDate = $('[id^="startDate"]').filter(function(){
return $(this).val().length!==0;
});
var showingType = $('[id^="tShowingType"]').filter(function () {
return $(this).val() === "";
});
var startTime = $('[id^="startTime"]').filter(function () {
return $(this).val() === "";
});
var endTime = $('[id^="endTime"]').filter(function () {
return $(this).val() === "";
});
if (startDate.length == 0 || showingType.val() === "" || startTime.val() === "" || endTime.val() === "")
{
alert("Please fill out the required fields.");
}
else
{
UI.goToConfirmStep();
}
I have tried:
var startDate = $('[id^="startDate"]').filter(function(){
return $(this).val().length!==0
var startDate = $('[id^="startDate"]').filter(function(){
return $(this).val().length===0
startDate.length == 0
startDate.length < 0
startDate.length < 1
It seems that you have wrong id mapped- startDate in the selector. In your code you have IDs like startDate_[pk]. So you need a starts with selector like below.
var emptyInputs= $('[id^="startDate"]').filter(function(){
return $(this).val().length===0;
});
if(emptyInputs.length>0){
alert("Please fill out the required fields.");
}
Fiddle Demo
You are not targetting the id correctly
if(!$("#startTime_[pk]").val())
if (!$('#startTime_[pk]').val()) {
console.log('input empty');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<input id="startTime_[pk]" type="text" value="" />
Update
the [pk] actually changes because it's a guid that gets loaded up on the page load
Then use the starts with selector
if(!$('[id^="startTime"]').val())
length is not a function. Here is an example of the above code working by removing the parenthesis after length
function validate() {
if ($("#tShowingType").val() === "" || ($("#startDate").val().trim().length === 0) || ($("#startTime").val() === "") || ($("#endTime").val() === "")) {
alert("Please fill out the required fields."); } else { UI.goToConfirmStep();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type='text' id='startDate' />
<button onclick='validate();' >Button</button>
Change the condition to the following:
if(!$('[id^="startDate"]').val()){
alert("Please fill out the required fields.");
}
http://jsfiddle.net/3vHxF/ Here is what I tried
And my html code is :
<form id="commentForm" style="width:200px;" name="MYFORM" action="#">
<label>
<strong>Enquiry Form </strong>
</label>
<label>Name</label>
<input id="name" type="text" size="30" name="name">
<label>Phone No</label>
<input id="phone" type="text" size="30" name="phone">
<label>Email</label>
<input id="email" type="text"size="30" name="email">
<label>Message</label><br>
<textarea id="message" name="message"></textarea>
<input id="Send" type="submit" value="Send" onclick="send()">
</form>
Javascript is :
var name=getElementById('name');
var phone=getElementById('phone');
var email=getElementById('email');
var mess=getElementById('message');
function send(){
if(name==null&&phone==null&&email==null&&mess==null)
alert('field is empty');
}
I want to alert the field which is empty, and at the same time I want to write it simply. Please don't suggest any plug-ins.
Remove the click handler from the button and put a submit handler on the form:
<form id="commentForm" onsubmit="return validat(this);" ... >
Now you can do a simple validation:
function validate(form) {
var control;
var isValid = true;
for (var i=0, iLen=form.elements.length; i<iLen; i++) {
control = form.elements[i];
if (control.value == '') {
alert('Field ' + control.name + ' is empty');
isValid = false;
}
}
return isValid; // false cancels submit
}
That is a very minimal validation script, but it's a start.
Incidentally, since your form controls have names (which are required to be successful), they don't need ids.
Your problems:
You are testing HTMLInputElement objects and not the values they hold (so get the value)
You are comparing strings to null (compare to an empty string)
Your failure condition is based on all of them failing instead of any of them failing (use or not and)
Such:
if(name.value === "" || phone.value === "" || email.value === "" || mess.value === "")
alert('field is empty');
}
To determine which one is empty, you need to test them one at a time instead of in a single if statement with ||s.
Not a clean approach. But try developing the below code.
var name=document.getElementById('name').value;
var phone=document.getElementById('phone').value;
var email=document.getElementById('email').value;
var mess=document.getElementById('message').value;
function send(){
if(isEmpty(name, 'name') || isEmpty(phone, 'phone') || isEmpty(email, 'email') || isEmpty(mess, 'message')) {
return false;
}
return true;
}
function isEmpty(val, fld) {
if(val && val != null) {
return true;
}
alert(fld +" is Empty");
return false;
}
change
var name=getElementById('name');
var phone=getElementById('phone');
var email=getElementById('email');
var mess=getElementById('message');
to
var name=document.getElementById('name').value;
var phone=document.getElementById('phone').value;
var email=document.getElementById('email').value;
var mess=document.getElementById('message').value;
and then use
if(name.value === "" || phone.value === "" || email.value === "" || mess.value === "")
alert('field is empty');
}
You could use the following jQuery:
$(":text,textarea").each(function() {
$(this).css("outline", $(this).val() ? "1px solid red" : "none");
});
Sorry, I thought "no plugins" meant "no jQuery plugins." (You would call jQuery a library or dependency, not a "plugin")
This is a mostly untested non-jQuery version:
function highlightMissingInputs() {
for (var formIndex = 0; formIndex < document.forms.length; formIndex++) {
var form = document.forms[formIndex];
for (var inputIndex = 0; inputIndex < form.length; inputIndex++) {
var input = form[inputIndex];
switch (input.tagName) {
case "INPUT":
var typeAttribute = input.attributes.type;
if (typeAttribute) {
var type = (typeAttribute.value || "").toLowerCase();
switch (type) {
case undefined:
case "":
case "text":
case "email":
case "tel":
case "email":
case "search":
break;
default:
continue;
}
}
break;
case "TEXTAREA":
break;
default:
continue;
}
input.style.outline = input.value ? "none" : "1px solid red";
}
}
}