Develop Reference

jQuery input validation not working after on newly created input field with jquery append function

i'm using jQuery append function to clone the input fields on front-end, it is working fine but the issue is i have validation on parent element, it is not working on the newly append input fields. This is my jQuery code.
jQuery(function($) {
$("#addChild").click(function() {
$(".name-field:first").clone().find("input").val("").end()
.removeAttr("id")
.appendTo("#additionalselects")
.append($('<a class="delete" href="#"><i class="fa fa-times"></i></a>'));
});
$("body").on('click', ".delete", function() {
$(this).closest(".name-field").remove();
});
});
//Validation
$(document).ready(function() {
$('.name-field').on('input', function() {
// added for bit of simplicity or you can directly get valuess
var name = $('input[name="firstname"]').val();
var date = $('input[name="date"]').val();
if (name != "" && date != "") {
// values seems filled remove class
$('#stepname').removeClass('disabled');
} else {
// user has emptied some input so add class again.
$('#stepname').addClass('disabled');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="name-field" class="name-field row">
<div class="col-xs-12 col-sm-6 childname">
<div class="field text-left">
<label class="text-left">Name of child</label>
<input id="firstname" class="firstname" name="firstname" type="text" />
</div>
</div>
<div class="col-xs-12 col-sm-6 dateofbirth">
<div class="field text-left">
<label class="text-left">Date of birth</label>
<input type="text" class="date" id="thedate" name="date" />
</div>
</div>
</div>
Next Step
Can anyone help me with this, how can achieve this?
Thanks in advance.

As you are adding .name-field dynamically so event are not binding to the new rows try to change your parent element like,
$('#additionalselects').on('input','.name-field input',function(){
//^^^ use other static element or document if not works
var parent = $(this).closest('.name-field'); // get the parent of focused input
var name = parent.find('input[name="firstname"]').val();
var date = parent.find('input[name="date"]').val();
$('#stepname').toggleClass('disabled',(!name || !date));
});
Also you should make the below changes in your HTML,
Remove all id which are part of cloning
Make an array of fields which are to be cloned like firstname[]

Check if input is empty, if not, add class to parent div

I have a number of inputs like this:
<div class="fg-line">
<input type="text" class="form-control fg-input place-edit placeInformation" id="place_name">
<label class="fg-label">Place Name</label>
</div>
<div class="fg-line">
<input type="text" class="form-control fg-input place-edit placeInformation" id="place_address">
<label class="fg-label">Place Address</label>
</div>
I get some data from an API and then append to these inputs (so the user can edit).
This works fine. The issue is that I want to add a class to this:
<div class="fg-line">
This is simple enough if I only have one of these and one input, but since I have multiple, I need some way to check each input and if not empty add the class fg-toggled such that the line becomes:
<div class="fg-line fg-toggled">
If I had just one input, I'd do this:
if (('#place_name').value != '' || ('#place_name').value != ('#place_name').defaultValue) {
$('.fg-line').addClass('fg-toggle')
}
But I don't know how to do this without writing this out for every class (there are 30+). Is there a way to iterate this somehow? I tried checking .place-edit but since it's a class, if any of the inputs with the class are not empty then they all get the new class added.

Simply loop through each input and find the parent using .closest().
$('.placeInformation').each(function() {
var $input = $(this);
if ($input.val()) {
var $parent = $input.closest('.fg-line');
$parent.addClass('fg-toggled')
}
});
Sample plunkr

Can use filter()
$('.fg-line').has('.placeInformation').filter(function(){
return !$(this).find('.placeInformation').val()
}).addClass('fg-toggled')
Not sure what "default" should be or how it is declared. Could be set in a data attribute and add an || to above filter condition

Use each() and closest()
Try this :
$(".fg-input").each(function() {
if ($(this).val() != '') {
$(this).closest(".fg-line").addClass('fg-toggle');
}
})
.fg-toggle
{
color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fg-line">
<input type="text" class="form-control fg-input place-edit placeInformation" id="place_name">
<label class="fg-label">Place Name</label>
</div>
<div class="fg-line">
<input type="text" class="form-control fg-input place-edit placeInformation" id="place_address">
<label class="fg-label">Place Address</label>
</div>

You could just loop through the .place-edit class and then check the values and add the class to the parents, like this:
$('.place-edit').each(function(){
if($(this).val() != '' || $(this).val() != $(this).defaultValue) {
$(this).parent().addClass('fg-toggle');
}
})

Try this.. I'm assuming they all have the same class
if (('#place_name').value != '' || ('#place_name').value != ('#place_name').defaultValue) {
$('.fg-line').each(function(){
$(this).addClass('fg-toggle')
});
}

Capturing form input in JQuery

Right now I have my form set up with a generic button. Would it be easier to use a submit?
I'm trying to capture the user input and then pass it on as part of a URL. Using .find has been getting me an array of something else.
div class="username-input form-horizontal">
<!-- <div class="form-group"> -->
<label for="inputUsername" class="col-sm-3 control-label">Username</label>
<div class="col-sm-5">
<input type="text" value="Username" id="inputUsername">
</div>
</div>
<button class="signup-button col-sm-1 control-label"> Sign in </button>
<script>
$(document).ready(function() {
$(".signup-button").click(function() {
var usernameInput = $('form').find('input[type=text]')
console.log(usernameInput)
});
});

You're accessing the element not the value. Use val for it
var usernameInput = $('form').find('input[type=text]').val(); // now you get input

Since you have input field ID & it should be unique so you can use ID as selector also.
var name = $("#inputUsername").val();

You have to access value. This is the way you can access value of input text.
$(document).ready(function() {
$(".signup-button").click(function() {
var usernameInput = $('#inputUsername').val();
console.log(usernameInput);
});
});

FORM won't submit even though input fields are not empty

it wont submit even though the fields are not empty
here's the form:
<form id="form" role="form" method='POST' action="user_add-post.php">
<div class="form-group">
<p><label class="control-label">Title</label><br />
<input style="width: 40%" class="form-control" type="text" name="postTitle"/>
</div>
<div class="form-group">
<p><label lass="control-label">Description</label><br />
<textarea name="postDesc" cols="60" rows="10"></textarea>
</div>
<div class="form-group">
<p><label>Content</label></p>
<textarea name="postCont" cols="60" rows="10"></textarea>
</div>
<input type='submit' name="submit" class='btn btn-primary' value='Submit'></form>
and here's my jquery to check if the input fields are empty:
$('#form').submit(function() {
if ($.trim($("#postTitle").val()) === "" || $.trim($("#postDesc").val()) === "" || $.trim($("#postCont").val()) === "") {
alert('All fields required');
return false;
} });
now why won't it submit? it keeps on saying that all fields are required even though I already fill up the fields.

You have missed to add id in input boxes,
<input style="width: 40%" class="form-control" type="text" name="postTitle"/>
Change it to
<input style="width: 40%" class="form-control" type="text" id="postTitle" name="postTitle"/>
for next text box aswell ,Please Refer

you do not have define the ids so change the condition to
if ($.trim($('[name="postTitle"]').val()) === "" || $.trim($('[name="postDesc"]').val()) === "" || $.trim($('[name="postCont"]').val()) === "")

You have not given the ids to any of your form field, use global selector with condition
here is the working fiddle of your task
`$("input[name=postTitle]").val()` //name selector instead of id

If condition should be like this:
if ($("#postTitle").val().trim() == "" || $("#postDesc").val().trim() == "" || $("#postCont").val().trim() == "") {

See for any JS errors if you are getting. Also , try it on various browsers. You are not using ID attribute, but Name attritute, so it may not work on Firefox,Chrome and may work on IE7 and below. Hope this helps you

Provide Id to input element in html code.
Jquery code is fine
here is the correct code of html
<input style="width: 40%" class="form-control" type="text" name="postTitle" id="postTitle"/>

Yes like everyone else is saying if you are going to use selectors then you need those id's on the form fields. Or you can use the names like this:
$("[name=postTitle]").val()
$("[name=postDesc]").val()
$("[name=postCont]").val()
Here is your jquery with the above:
$('#form').submit(function() {
if ($("[name=postTitle]").val().trim() == "" || $("[name=postDesc]").val().trim() == "" || $("[name=postCont]").val().trim() == "") {
alert('All fields required');
return false;
} });

As others have said, the selectors are based on ID but using name attribute values. So you can add ID attributes, change the selector or use a different strategy.
Since the listener is on the form, this within the function references the form and all form controls with a name are available as named properties of the form. So you can easily test the value contains something other than whitespace with a regular expression, so consider:
var form = this;
var re = /^\s*$/;
if (re.test(form.postTitle.value) || re.test(form.postDesc.value) || re.test(form.postCont.value) {
/* form is not valid */
}
which is a lot more efficient than the OP.
Given the above, a form control with a name of submit will mask the form's submit method so you can't call form.submit() or $('#formID').submit().

Reusing the same function in javascript for elements using the same classes not working

Javascript:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#first").keyup(function(event){
event.preventDefault();
ajax_check("#first");
});
$("#last").keyup(function(event){
event.preventDefault();
ajax_check("#last");
});
});
function ajax_check(current)
{
var check=$(current).val();
$.post("validate.php", {tocheck : check}, function(filled) {
if(filled == '1')
{
$(".check").html("");
$(".ajax_check").removeClass("error");
$(".ajax_check").addClass("success");
}
else
{
$(".check").html("");
$(".ajax_check").removeClass("error");
$(".ajax_check").removeClass("success");
}
})
}
HTML
<div class="control-group ajax_check">
<label class="control-label" for="first">First Name</label>
<div class="controls">
<input type="text" id="first" class="validate" placeholder="First" required>
<span class="help-inline check" ></span>
</div>
</div>
<div class="control-group ajax_check">
<label class="control-label" for="last">Last Name</label>
<div class="controls">
<input type="text" id="last" class="validate" placeholder="Last" required>
<span class="help-inline check" ></span>
</div>
</div>
The issue I'm having is when I enter in info for one of the input, the other one gets highlighted too, which isn't suppose to happen. And I think my code is kind of sloppy, but I'm trying to reuse the ajax_check function instead of making a function for each input field.
Is there a way I could reuse the function for both of the inputs? I'm new to Javascript, so I'm kind of lost. Thank you!
http://i.imgur.com/BiLObRF.png

it has to do with the scope you're requesting .check within in the ajax call. You're going back to document-level (instead of just within the current node). A simple change makes this work as intended:
var $this = $(current), // store reference to jquery object
$scope = $this.closest('.ajax_check'), // set scope to .ajax_check
check = $this.val();
$.post("validate.php", {tocheck : check}, function(filled) {
if(filled == '1')
{
// use .find() to search _within_ $scope and not across
// the entire document.
$scope.find(".check").html("");
$scope.removeClass("error").addClass("success");
}
else
{
// same thing, search within $scope
$scope.find(".check").html("");
$scope.removeClass("error success");
}
})
You can also refactor your bindings a bit to make this a little more brief as well:
$("#first,#last").keyup(function(event){
event.preventDefault();
ajax_check(this); // this is automatically going to be #first or #last
// just by the selector above
});

You can use comma to add items in selector, you can use this to get current element,
$("#first, #last").keyup(function(event){
event.preventDefault();
ajax_check('#'+this.id);
});
OR, pass object instead of id.
$("#first, #last").keyup(function(event){
event.preventDefault();
ajax_check($(this));
});
function ajax_check(current)
{
var check=current.val();

You need to save the this reference and search the closest form :
function ajax_check(e)
{
e.preventDefault()
var $this = $(this)
var check=$this.val();
$.post("validate.php", {tocheck : check}, function(filled) {
$this.siblings(".check").html("");
$this.closest(".ajax_check").removeClass("error").toggleClass("success", filled == '1');
})
}
$("#first, #last").keyup(ajax_check);
siblings
closest