I have question about how to validate input type=text or textbox OR input type="file" upload a file at a time using javascript or jquery?
1) If textbox is selected than no need to upload file.
2) If upload file is selected than no need to textbox.
3) Both
simple with required attribute
<form>
<input type="text" required="true">
<input type="file" required="true">
<button type="submit">validate</button>
</form>
Or with Javascript validation
Updated
$('button').click(function(){
var a =$(".validate").map(function(){
return $(this).val().trim() ? true : false
}).get()
if(a.includes(true)){
console.log('pass')
}
else{
console.log('select any one')
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="validate">
<input type="file" class="validate">
<button>validate</button>
" Just check both file and text box is empty or not before proceeding further."
if(!$('input:text').val().trim() && !$('input:file').val().trim()){
alert('Enter required data');
}
Related
I want to limit number of words that user input to a text box . I tried one code it was successfull for only single text box when i ammend it to multiple text box this code did not work, An advice will be really appreciated.
<html>
<head>
<script type="text/javascript">
function validate(){
x=document.myForm
input=x.myInput.value
if (input.length>5){
alert("The field cannot contain more than 5 characters!")
return false
}else {
return true
}
}
</script>
</head>
<body>
<form name="myForm" action="http://www.java2s.com" onsubmit="return validate()">
Enter some text (less than 5 characters):
<input type="text" name="myInput" size="20">
<input type="submit" value="Submit">
</form>
</body>
</html>
There are two methods to go about it:
Method 1:
Using the maxlength="5" attribute
<input type="text" maxlength="5" name="somename"/>
Method 2:
Using Javascript:
<script language="javascript" type="text/javascript">
function limitInput(field, max) {
if (field.value.length > max) {
field.value = field.value.substring(0, max);
}
}
</script>
<input type="text" name="somename" onKeyDown="limitInput(this,5);" onKeyUp="limitInput(this,5);"" />
UPDATE
With a message:
<script language="javascript" type="text/javascript">
var errHolder = document.getElementById('err');
function limitInput(field, max) {
if (field.value.length > max) {
err.style.display = 'inline-block';
}
else
{
err.style.display = 'none';
}
}
</script>
<span>
<input type="text" name="somename" onKeyDown="limitInput(this,5);" onKeyUp="limitInput(this,5);" />
</span>
<span id="err" style="display:none;background-color:red;">Please enter less than 5 characters</span>
You can either set the maxlength attribute or trim the string everytime the user enters into it. Using maxlength is a better way of doing it
var input = document.getElementById("limit5");
var LIMIT = 5;
input.onkeyup=function(){
if(input.value.length > LIMIT){
input.value = input.value.substr(0,LIMIT);
//alert("Please limit your input to 5 characters")
}
}
<input id="autolimit5" maxlength="5" type="text"/>
<input id="limit5" type="text"/>
There are many ways to to prevent user from entering data in form elements. What you are trying is to validate all data in one go when user clicks on the Submit button. It would be better to validate at the time when the user is typing. Basically there are 4 related events whenever the user presses anything on the keyboard.
onKeyPress
onKeyDown
onKeyUp
onInput
You can use a combination of these events to achieve anything that you want. For the use case in the question we can just use keypress event.
<html>
<head>
<script type="text/javascript">
function validate(){
x=document.myForm
input=x.myInput.value
if (input.length>5){
alert("The field cannot contain more than 5 characters!")
return false
}else {
return true
}
}
// function which runs on every keypress of input element to which this
// function is attached
function validateTextField(e){
if(event.currentTarget.value.length >= 5){
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="http://nothing.com" onsubmit="return validate()">
Enter some text (less than 5 characters):
<input type="text" name="myInput" size="20" onkeypress="return validateTextField(event)">
<input type="text" name="anotherInput" size="20" onkeypress="return validateTextField(event)">
<input type="submit" value="Submit">
</form>
</body>
</html>enter code here
If you want, you can customize the size for the validation by changing some of the parameters
Update the html input definition with below
<input type="text" name="myInput" size="20" onkeypress="return validateTextField(event, 5)">
<input type="text" name="anotherInput" size="20" onkeypress="return validateTextField(event, 8)">
Update the function definition to use the second parameter
function validateTextField(e, size){
console.log(e);
if(event.currentTarget.value.length >= size){
return false;
}
}
I'm trying to check if the textbox is empty for my form. However, whenever I try to hit submit instead of an alert box message, telling me Firstname is empty I get "Please fill out filled".
('#submit').click(function() {
if ($('#firstname').val() == '') {
alert('Firstname is empty');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="elem" autocomplete="on">
First Name:
<br>
<input type="text" name="firstname" id="firstname" required placeholder="Enter the first name" pattern="[A-Za-z\-]+" maxlength="25"><br>
<input type="submit" id="submit" value="Submit" />
</form>
Firstly I'm assuming that the missing $ is just a typo in the question, as you state that you see the validation message appear.
The reason you're seeing the 'Please fill out this field' notification is because you've used the required attribute on the field. If you want to validate the form manually then remove that attribute. You will also need to hook to the submit event of the form, not the click of the button and prevent the form submission if the validation fails, something like this:
$('#elem').submit(function(e) {
if ($('#firstname').val().trim() == '') {
e.preventDefault();
alert('Firstname is empty');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="elem" autocomplete="on">
First Name:
<br>
<input type="text" name="firstname" id="firstname" placeholder="Enter the first name" pattern="[A-Za-z\-]+" maxlength="25"><br>
<input type="submit" id="submit" value="Submit" />
</form>
Personally I'd suggest you use the required attribute as it saves all of the above needless JS code - unless you need more complex logic than just checking all required fields have been given values.
Because you have the required property set.It is giving you Please fill out field validation as the error message.It is the validation that HTML5 is performing.
For this please make one function like :
function Checktext()
{
if ($('#firstname').val() == '') {
alert('Firstname is empty');
return false;
}
else
{
return true;
}
}
now call this function on submit button click like :
<input type="submit" id="submit" value="Submit" onclick="return check();" />
I'm trying to update a page by echoing the input of a user in real time through ajax. However, when a user types in something and clicks 'send' there is nothing echoed. But when I preset the input to a random word through html and click 'send' the word is shown. Why is this and how can I update the input value without manually doing so in html?
HTML
<input type="text" id="userName" name="typeit" value=""/>
<!-- Input containing preset value -->
<input type="text" id="userName" name="typeit" value="cindy"/>
<input type="button" id="text_value" value="send"/>
JQuery
// I used this to check if the actual input was being updated
$('#text_value').click(function() {
var text_value = $("#userName").val();
if(text_value=='') {
alert("Please enter a title first");
}else{
alert(text_value);
}
});
I think what you want is a keyboard event like keyup:
$('#userName').keyup(function() {
var text_value = $(this).val();
if(text_value=='') {
alert("Please enter a title first");
}else{
$("p").html(text_value);
}
});
Also id can only be used once on the page so you need to change one of them:
<input type="text" id="userName" name="typeit" value=""/>
<!-- Input containing preset value -->
<input type="text" id="somethingElse" name="typeit" value="cindy"/>
<input type="button" id="text_value" value="send"/>
<!--for my example-->
<p>Update</p>
FIDDLE
You have a mistake in your HTML as you define id="userName" twice. If you compare strings you always need the === identical operator. Try out this snippet:
// I used this to check if the actual input was being updated
$('#text_value').click(function() {
var text_value = $("#userName").val();
if (text_value === '')
alert("Please enter a title first");
else
alert(text_value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="Uname" name="typeit" value="" />
<!-- Input containing preset value -->
<input type="text" id="userName" name="typeit" value="cindy" />
<input type="button" id="text_value" value="send" />
<div id="test"></div>
I have a simple form, with one issue.
In explorer, if nothing is inserted, the placeholder is passed as input of the field.
Here is JSbin: http://jsbin.com/EvohEkO/1/
I would like to make a simple comparision, when form is submitted, to check if the value of the field is equal to "First name", and if yes make the value empty ""
Just this i need.
Someone can help me please?
<form onsubmit="return checkform()">
<input name="test" placeholder="placeholdertext" id="test" />
<input type="submit" value="submitbutton"/>
</form>
in js
you should import jquery latest version this is the link: http://code.jquery.com/jquery-1.10.2.min.js
function checkform(){
var fieldvalue = $.trim($('#test').val());
if(!fieldvalue || fieldvalue=="placeholdertext"){
alert('there is no input');
return false;
}else{
alert('enjoy your form!');
return true;
}
}
This is somewhat easier..
$(document).ready(function(){
$("#form").submit(function(){
$('#form input:text, textarea').each(function() {
if($(this).val()==$(this).attr('placeholder'))
$(this).val(" ");
});
});
});
Just put your field value in hidden type input like this :-
<input id="hdnfield" name="hdnfield" value="<Your Field Value>" />
To check the value of a form field use the val() function on the input element
var input_value = jQuery('Input Element Selector').val();
As I looked to your form, the elements do not have any id attribute, I recommend that you add one to each of them, also change the submit input to button the you have more control on the javascript. so your form will look like :
<form id="form" action="form.php" method="post">
<input id="fname" type="text" placeholder="First name" name="fname"><br>
<label for="fname" id="fnamelabel"></label>
<input id="lname"type="text" placeholder="Last name" name="lname"><br>
<textarea id="message" placeholder="Contact us!" cols="30" rows="5" name="message"></textarea><br>
<br>
<input type="button" value="Submit">
</form>
so your jQuery will look like:
jQuery(document).ready(function(){
jQuery('input[type="button"]').click(function(){
var fname = jQuery('#fname').val();
var lname = jQuery('#lname').val();
var message = jQuery('#message').val();
...... Do whatever you need & then change the input values
...... if all validation has passed the use jQuery('#form').submit(); to submit the form otherwise reset the form:
jQuery('#fname').val("");
jQuery('#lname').val("");
jQuery('#message').val("");
});
});
here is a working version:
jsfiddle working link
You can do it like the following!
<form>
<input type="text" id="first_name" name="first_name"/>
<input type="submit" id="submit" value="submit"/>
</form>
<script type="type/javascript"/>
jQuery.noConflict();
(function ($) {
$(function () {
$("#submit").click(function () {
if ($("#first_name").val() == "first name") {
$(this).val("");
}
});
});
})(jQuery);
</script>
In my web application I have edit profile page. In editprofile page their is many fields like
Name : <input type="text" name="name"/>
Location : <input type="text" class="geolocation" name="location">
Birthdata : <input type="date" name="dob">
Profile Picture : <input type="file" name="photo"/>
I want to send back the data of only the fields which are edited and not all the fields.
I'd normally do something like this on the backend.... but for your requirement you could remove the inputs that haven't changed. When you generate the html you can define an extra data attribute. Here's how I would do that:
HTML:
<form id="myform">
<input type="text" id="Name" data-initial="Foo" value="Foo" />
<input type="text" id="Location" data-initial="Bar" value="Bar" />
<input type="submit" value="Submit" />
</form>
JS:
$("#myform").submit( function() {
$(this).find("input").filter( function() {
$this = $(this);
return $this.data("initial") == $this.val();
}).remove();
});
http://jsfiddle.net/uLe7T/
I added an alert in the fiddle so you can see that they are removed before the form is submitted
jsFiddle
HTML
<input id="test" type="text" value="Some Text" data-value="Some Text">
JS
$('#test').blur(function() {
el = $(this);
if (el.val() != el.attr('data-value')) {
console.log('Edited');
} else {
console.log('Not Edited');
}
});