(I am not using Jquery Validation)
I'm trying to return custom errors if the field is incorrect or empty. For instance, if the #id_first_name field is null. Append the string, " first name" to p#error to result in :
Please fill in your first name
I've made a fiddle here to show what I mean. So in the list of required fields... How would I be able to grab / check each individual required id and assign the corrosponding error?
Thank you for your help in advance!
You're fiddle should be as basic as possible, removing all other information, but you could try something like this,
$('form').on('submit',function(){
$('input').each(function(){
$this = $(this);
if($this.val() == 'null')
{
$('p#error').append('Please enter your ' + $this.attr('placeholder'));
}
}
});
You could do something like below
$('form input').on('blur', function() {
var id = $(this).attr('id');
var val = $(this).val();
if(id == 'myInput') {
if(!val.length) {
$('#error').append('Please enter a value into the input');
}
}
});
This is a simple way of doing form validation, just tailor the example to your needs.
EDIT
If you want it to work in your example it would be better to have a div with the id of error and append p tags with the corresponding error values.
Happy coding :)
Related
Now, If I hit the button, it clears all in the input field, and it automatically inputs "#marry" to it.
But, I don't want it to be cleared:(
What if I want to add "#marry" to the end of the strings that already exists in the input field?
How can I customize my javascript part?
Input field
<textarea class="box text_area" cols="10" id="input" name="comment[body]"></textarea>
button
<a href="#topic" id="username" value="#marry”><span class='btn'>reply</span></a>
javascript
$(document).on('click', 'a#username', function() {
$(".box#input").val($(this).attr('value'));
}
val() has a callback with the arguments index and value, you can use that to easily add something to the value.
$(".box#input").val(function(_, val) {
return this.value + 'some extra string';
});
$(document).on('click', 'a#username', function() {
var self = this;
$(".box#input").val(function(_, val) {
return val + self.value;
});
});
First of all adeneo's answer is good and you should read it. Here is an alternative solution that does not use jQuery:
I assume that both these elements are a part of a form. Let's say for instance the form has an ID of "post". We can access it using document.forms and then its fields as such:
var input = document.forms.post["comment[body]"];
Now, we can add to its value whenever the button is clicked. First select username with getElementById or querySelector and then add the event:
username.addEventListener("click", function(ev){
input.value += ev.target.value;
});
Or with jQuery (this also delegates if the element is not in the DOM yet):
$(document).on('click', 'a#username', function() {
input.value += this.value;
});
It might be desirable to append an extra space between the current text and the username.
append #marry at the end of text area. you can use bellow code its working fine.
$(document).on('click', 'a#username', function () {
var txtvalue = $(".box#input").val();
$(".box#input").val(txtvalue + $(this).attr('value'));
});
see jsfiddle link http://jsfiddle.net/F6mkh/1/
Hi everyone I have an issue with Jquery :
I have a multiple selection and the user can select one thing and it will copy the text into an input above. I would like that the text in the multiple selection that will be copied become red if the button is clicked so did you understand? I don't know how to do condition in Jquery, here is what I have done :
$(document).ready(function(){
if ($choose = true)
{
$("ok").click(function(){
$("droite").css({"background-color":"yellow"});
}
});
});
droite is an id and no it's not working but I would like to know how it works
choose is a function here it is :
var choose = function(bouton){
var lesoptions = $('#droite').find(":selected");
//lesoptions.remove();
$('#numLot').val(lesoptions[0].text);
};
Can I have your opinion ?
thanks
$("ok") is wrong. it should be $("#ok") or $(".ok") or whatever.
compare operator is == instead =
Try to use like below,
var $Choose;
//Assign value to $Choose as like true or false
$(document).ready(function(){
if ($choose)
{
//If you have id like ok use "#" or if class use "." instead
$("#ok").click(function(){
$("#droite").css({"background-color":"yellow"});
});
}
});
Hope this helps...
You have to use . selector before class names and # before id names.
Read about selectors: jQuery Selectors
Since choose is a function so, you will have to return something and check if it returns true/false. So make your function like this:
function choose(bouton){
var something = /*your return value*/; //Put your return value here
var lesoptions = $('#droite').find(":selected");
$('#numLot').val(lesoptions[0].text);
return something; //something is what you want to be returned by function
};
If $choose is not defined while you are putting it in if condition then you will not get proper working.
If #ok is added dynamically then use delegation using .on.
You should put code like this:
$(document).ready(function(){
var $choose = choose(bouton);
if ($choose)
{
$("#ok").on("click",function(){ //Again not mentioned what is ok, still like you told I assume it id
$("#droite").css("background-color","yellow");
});
}
});
Within my form there are 2 SELECT Options. I'm looking to check the values of both, to check that they match.
This below is my jquery, when the code runs, I deliberatly have different values in the SELECT options and the form will just carry onto the next page without flagging up the error that they don't match.
<script type="text/javascript">
$(document).ready(function () {
jquery(function(){
$("leadgenform2").click(function(){
$(".error").hide();
var hasError = false;
var exppagesval = $("#exppages").val();
var pagesseenval = $("#pagesseen").val();
if (exppagesval != pagesseenval) {
$("#pagesseen").after('<div class="alert alert-success display-hide"><button class="close" data-close="alert"></button>Pages Seen & Expected Pages do not match!</div>');
hasError = true;
}
if(hasError == true) {return false;}
});
});
});
</script>
What have I missed?
Not sure why formatting has gone a miss. sorry!
hey $("leadgenform2") is invalid selector either make it a class or id(preferred) and use like
$(".leadgenform2") for class.
$("#leadgenform2") for id.
$("leadgenform2") is not a valid selector. assuming it is an ID, so you should use $("#leadgenform2").
Just from a first glance... you seem to have an error on line1:
jquey(function(){
should be
jquery(function(){
And you are missing $(document).ready(function(){ .... );
Without this, click event will not fire.
I have an e-mail form on my website, with four fields. Three text inputs and a text area. Each field has a default value attribute which serves as its label. I would like these values to be automatically unset/reset on their element's focus and focusout events.
I have the following JavaScript/jQuery code, which creates this behaviour.
$('input,textarea').data('default', "bleh");
$('input,textarea').focus(function() {
if($(this).val() === $(this).data('default')) {
$(this).val('');
}
});
$('input,textarea').focusout(function() {
if ($(this).val() === '')
{
$(this).val($(this).data('default'));
}
});
My problem comes in the storing of the initial data('default') attribute. I had tried using .data('default', $(this).val())... but apparently that is illegal and $(this) is not recognized.
I have tried to find a clean jQuery way to iterate over each of the elements, but I can't seem to find one.
Is there an easy way, using jQuery, to achieve what I want?
Unless I'm mistaken, there's no reason to be setting data properties on the element, you can make use of the elements defaultValue property:
$('input, textarea').focus(function() {
if (this.value === this.defaultValue) {
this.value = '';
}
});
$('input, textarea').focusout(function() {
if (!$.trim(this.value).length) {
this.value = this.defaultValue;
}
});
Here's a fiddle
There is no this, because you're not in a callback. You'll have to iterate over each matched element, setting their default one at a time.
The "clean jQuery way" is simply with each:
$('input,textarea').each(function () {
$(this).data('default', $(this).val());
});
You need iterate through the input elements and then set the value to data using .each()
$('input,textarea').each(function(){
var $this = $(this);
$this.data('default', $this.val())
});
I facing problem with my jquery, on showing input text based on input value.
Here is the JS fiddle demo :
http://jsfiddle.net/Ltapp/364/
When I try to input #hotmail, the input box will show. But when I want to type some text in the #hotm input box, it will hide again.
JS code :
$(window).load(function(){
var myString = '#hotmail';
$('#hotm').hide();
$("input").keyup(function () {
var value = $(this).val();
if($(this).val().match(myString)) {
$('#hotm').show();
} else {
$('#hotm').hide();
}
});
});
It's because your selector $("input") affects both input elements. I have updated it to the $("input:first") selector instead. JsFiddle here
$("input:first").keyup(function () {
var value = $(this).val();
if(value.match(myString)) {
$('#hotm').show();
} else {
$('#hotm').hide();
}
});
As many has said, you are binding the event on all the inputs I did a little change:
$(function(){
var myString = /#hotmail/ig;
$("#check").bind('keyup checkvalue', function() {
$('#hotm')[myString.test(this.value) ? 'show' : 'hide']();
}).trigger('checkvalue');
});
using regex if you are using #HoTmAil it will also hit on that, and also added a custom event checkvalue to see if #hotm should be visible on for example a postback on the form you might be using.
demo: http://jsfiddle.net/voigtan/xjwvT/1/
You're affecting all inputs. Either give each one a unique ID / Class or use the jQuery $(this) method.
See JSFiddle Here:
http://jsfiddle.net/Ltapp/366/
<input type="text" id="firstinput"/>
<p id="secondinput"><input type="text"/></p>
var myString = '#hotmail';
$('#secondinput').hide();
$("#firstinput").keyup(function () {
var value = $(this).val();
if($(this).val().match(myString)) {
$('#secondinput').show();
} else {
$('#secondinput').hide();
}
});
use this for your if part :
if($(this).val().match($(this).val().substr(0,strlen($(this).val())))
it's because the new box also = "input"; if you give the hotmail textbox it's own id, it won't hide
<input id="hotmail" type="text"/>
and then
$("#hotmail").keyup(function () {...});