Validate input textbox with image - javascript

I have 13 input text boxes simply to collect information from user. I'm trying to add a little bit of logic that when user clicks next button check to see if input field is blank and if so place a X image after the textbox. Where I'm getting up up at is if I put text in the box then it will not outline the box in red but still places an X after the form.
I've tried using the $.each() and $.filter()
Here is the js:
var invalid = '<img src="css/Filtration/img/x.png" /> ';
$('.btn').click(function () {
var inputs = $(":input").filter(function () {
return this.value === "";
});
if (inputs.length) {
$(inputs).css('border-color', 'red').after(invalid);
console.log(inputs.length);
}
});
Here is some of the input text boxes not all :
<label>First Name:</label>
<input type="text" name="First Name" class="txtbox" id="firstName" />
<label>Last Name:</label>
<input type="text" name="Last Name" class="txtbox" id="lastName" />
<label>Email Address:</label>
<input type="text" name="Email Address" class="txtbox" id="email" />
<label>Company:</label>
<input type="text" name="Company" class="txtbox" id="company" />

Try this:
var invalid = '<img src="css/Filtration/img/x.png" /> ';
$('.btn').click(function () {
$(":input").each(function () {
if($(this).val() == '' ){
$(this).css({borderColor: 'red'}).after(invalid);
}
});
});
Note that if you had not previously set other border css parameters, the color may not work. So this pattern can take care of it in that case:
.css({border: '1px solid red'})
Now, :input is a bit broad and therefore inefficient. Therefore, its better to say:
$(':text', '#container').each(...
Where #container is, of course, the container of all your inputs.

Please, consider use jquery Validate, you can see examples here and documentation here

Related

Trying to add event listener so that when any form field is empty, it displays "Please enter a value"

Although it works when I remove addEventListener and add onblur="validateNonEmpty(this.form);" in each input element. Also it would be great if I can get to know difference between passing 'this' and 'this.form'. Any article explaining different scenarios to use 'this' keyword would be great!
<body>
<form action="">
Enter the banner message: <input type="text" name="message" id="message" value=""><span
class="helpText"></span><br>
Enter ZIP code of the location: <input type="text" name="ZIP" id="ZIP" value=""><span
class="helpText"></span><br>
Enter the date for the message to be shown: <input type="text" name="date" id="date" value=""><span
class="helpText"></span><br>
Enter your name: <input type="text" name="Name" id="Name" value=""><span class="helpText"></span><br>
Enter your phone number: <input type="text" name="phone" id="phone" value=""><span class="helpText"></span><br>
Enter your email address: <input type="text" name="address" id="address" value=""><span class="helpText"></span>
<br>
<input type="button" value="Order Banner">
</form>
</body>
<script>
let z = document.querySelectorAll('input');
for (let i = 0; i < z.length; i++) {
z[i].addEventListener('onblur', validateNonEmpty(this.form));
}
function validateNonEmpty(inputField) {
if (inputField.value.length == 0) {
document.querySelector('.helpText').innerHTML = "please enter a value";
return false;
} else {
document.querySelector('.helpText').innerHTML = "";
return true;
}
}
</script>
Well, the next time try to make a question more clear.
The difference between "this" and "this.form" is that the first is the input and the second is the form that the input belongs. I supposed you are a little confused about this. When you attach a function to an event, the this variable that is passed to the function refer to the element that trigger the event, in this case always is an input element, but the input elements also have a form property, you aren't getting the global forms variable, is the form of the input.
In Javascript.info you can get a better overview about what is happening.

How should t the className selector of input fields change the value iside?

If we have multiple fields of inputs each one having a difrent value of a string.
<input type="text" class="info" value="Enter Name">
<input type="text" class="info" value="Enter Lastname">
How would we be able to onfocus to the input fields inside . As an example i use the method of only ONE input field, as shown below in the code:
info.onfocus=function(){
if(info.value=="Enter Name"){
info.value=" ";
}
}
Now as i sad that code is only for one input field that i took as an example. How is it possible to focus on bouth of the input fields as i asked above. I know that i have to loop trough the input fields since bouth of them have the same class name. For any help from your friends i want to thank you in advanced.
You can set onFocus inside input field and then use event.target.value to access specified input value.
<html>
<script>
function _focus(ev) {
ev.target.value = '';
}
</script>
<input type="text" onFocus="_focus(event);" class="info" value="Enter Name">
</html>
EDIT:
<html>
<script>
function _focus(ev) {
ev.target.value = '';
}
function _blur(ev){
if(ev.target.value == ''){
if(event.target.id == 1) ev.target.value = "Enter Name"
if(event.target.id == 2) ev.target.value = "Enter Lastname"
}
}
</script>
<input id="1" type="text" onFocus="_focus(event);" onBlur="_blur(event)" class="info" value="Enter Name">
<input id="2" type="text" onFocus="_focus(event);" onBlur="_blur(event)" class="info" value="Enter Lastname">
</html>

Move form tag to active div

Is it possible to move (or focus) the form tag to a different div and only echo the values of that particular div with jQuery?
Both divs contain 2 input fields with the same name/id:
<input type="text" name="fname" id="fname" value="" placeholder="First Name">
<input type="text" name="lname" id="lname" value="" placeholder="Last Name">
I only want to submit the fields of 1 div which has the focus.
See my jsfiddle:
http://jsfiddle.net/myRJH/
You'll need somewhere to store input or equal to div in which the last focus.
As an example of a functional demo:
$(document).ready(function() {
var last_focus='';
$("input").blur(function(){
last_focus=$(this).parents("div");
})
$('#hit').click(function() {
alert(last_focus.find('input:first').val() + ' ' + last_focus.find('input:last').val());
});
});
Demo

Issue with focus() after detach and insertBefore

I am having an issue with using the Tab key to move through the fields when I detach the current focussed element and insert it again. Please find my code in jsfiddle.. Also see below:
JS Code:
$(document).ready(function() {
$('.formElem').focusin(function() {
// Remove default text on focus in
if ($(this).val() == $(this).attr('title')) {
$(this).val('').removeClass('defaultText');
if (($(this).attr('id') == 'reg_pwd') || ($(this).attr('id') == 'reg_conf_pwd')) {
id = '#' + $(this).attr('id');
marker = $('<span>123</span>').insertBefore($(this));
$(this).detach().attr('type', 'password').insertAfter(marker);
marker.remove();
}
if ($(this).get(0) != $(':focus').get(0)) {
$(this).focus();
}
}
}).focusout(function() {
// Remove default text on focus out
if ($(this).val() === '') {
$(this).val($(this).attr('title')).addClass('defaultText');
if (($(this).attr('id') == 'reg_pwd') || ($(this).attr('id') == 'reg_conf_pwd')) {
marker = $('<span>123</span>').insertBefore($(this));
$(this).detach().attr('type', 'text').insertAfter(marker);
marker.remove();
}
}
});
});​
The code changes the type of the field from text to password and back and forth. When you click or use Tab to reach the password field, it loses the focus after it has been added again. Thanks if somebody can figure out why.
It appears that your using html5, so perhaps you could take advantage of the placeholder attribute. Instead of <input value="blah" /> use <input placeholder="blah" />. Now you don't even need to have the defaultText class, so you can remove that, along with associated jquery code you have that removes and adds classes.
Now you can also change the <input type="text" /> to <input type="password" /> for the password fields. I'm not sure what your trying to do with <span>123</span>. So perhaps, I don't fully understand your question. But the below seems to accomplish the effect your trying to do.
A jsfiddle as well http://jsfiddle.net/8BBRC/2
edit: Had wrong jsfiddle link.
<input type="text" class="formElem" id="reg_fullname" name="fullname" placeholder="Full Name" title="Full Name" /><br />
<input type="email" class="formElem" id="reg_email" name="email" placeholder="Email Address" title="Email Address" /><br />
<input type="password" class="formElem" id="reg_pwd" name="pwd" placeholder="Confirm" title="Password" /><br />
<input type="password" class="formElem" id="reg_conf_pwd" name="conf_pwd" placeholder="Confirm Password" title="Confirm Password" /><br />
<input type="submit" id="reg_submit" value="Submit" /><br />

JQuery autocompleter for dynamic input boxes

I have a webpage with jquery generating dynamic html input boxes.
Something like this appears on the page.
<input type="text" id="numbers[]" ></input>
<input type="text" id="numbers[]" ></input>
<input type="text" id="numbers[]" ></input>
<input type="text" id="numbers[]" ></input>
These text-boxes all use the same autocompleter, is it possible in jQuery to point my autocompleter at all of these?
First of all id should be unique in the whole document so your code is not correct.
What you probably mean is
<input type="text" name="numbers[]" ></input>
<input type="text" name="numbers[]" ></input>
<input type="text" name="numbers[]" ></input>
<input type="text" name="numbers[]" ></input>
To enable autocomplete on those boxes just use the selector that will match them all
var data = "foo bar baz";
$('input[name^=numbers]').autocomplete(data);
You could add a div that wraps input and that is never changed, then upon creation of new input store its id in jquery internal cache, just like this:
var $input = '<input name=somename[] type="text"/>';
$('#mywrap').append($input);
$input.data('id', 'some id');
Then on you can access autocompleter in the following way:
$('#mywrap input').live('click', function() {
var id = $(this).data('id');
// and now do anything with the new id you have!
});

Categories