We Keep Coding

how to display error msg using create element in form validation?

I want to do a validation registration form. How to display the error of the input empty in a span at the bottom of the input?
I want this span to not already exist and be created to display the message.
enter code here
<form action="" name="reg-form" method="post">
<div id="name-box" onblur="validateFullname()" class="form-holder">
<input type="text" name="name" placeholder="enter name" id="name" class="form-control">
</div>
i want create a span element and display message after input or append to div.

The solution will look something like this:
Identify where the "Error Message" span will appear. It needs to be inside another element, even if that element is the body. My example contains: <div id="ErrMsg"></div>
You need an event that triggers both the validation, and the creation of the error span. Usually, that event is a button press. So let's go with that in this example:
$('#mybutt').click(function(){
var tmpL = $('#login').val();
var tmpP = $('#pword').val();
if( tmpL=='' || tmpP=='' ){
$('#ErrMsg').html('<span>Please fill-out all fields</span>');
}else{
alert('Logging in now');
}
});
$('input').on('keyup', function(){
if ( $('#ErrMsg span').length ) $('#ErrMsg span').remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="LoginDIV">
<div id="LName">
Login: <input id="login" type="text" />
</div>
<div id="LPass">
Pword: <input id="pword" type="password" />
</div>
<div id="ErrMsg"></div>
<div id="btnDIV"><button id="mybutt">Login</button></div>
</div>
Note: the <script> tag that references the jQuery library is all that you need in order to use jQuery. jQuery just makes javascript easier, more consistent, and less-typing-required.

Your best bet is probably to use JQuery Validation. It's built-in methods don't technically use a span, as you specified, but you could easily tack on your own function to un-hide the custom span you create. Or, better yet, just style their error-message <label> in the way you prefer.
Here's an example using just JQuery Validation:
<form action="/" method="post" id="commentForm">
<div class="form-holder">
<input type="text" name="username" placeholder="username" class="form-control">
</div>
<div class="form-holder col-12">
<input type="email" name="email" placeholder="email" class="form-control">
</div>
</form>
<script>
var validator = $("#commentForm").validate();
validator.showErrors({
"email": "Please enter a valid email address"
});
</script>
(The example leaves out the includes for JQuery and JQuery Validation.)

JQuery clone products field

I have a products page set up where a user can fill out fields to customise products (size, quantity, colour, etc). I also have a button where they can add another product and the same fields as before will appear below. However, I'd like to have a button where they can duplicate what they have just entered into the fields, so instead of adding a new set of fields, it copies what they have just entered.
https://jsfiddle.net/y0y7r3za/12/ this is the very basics of the code (cant post the real code for certain reasons).
$(document).ready(function() {
$('#duplicate').click(function(e) {
e.preventDefault();
$("#product").clone().appendTo("#newArea");
});
});
(example of code to allow the jsfiddle link).
The clone works and duplicates, however once I press the update button to 'save' the changes, and go back into the order to edit it, the cloned form is not longer there.
Any ideas as to why the clone disappears would be a great help!

$(document).ready(function() {
function cloningElement(el){
var source = el.closest(".clone-source").clone();
source.removeClass('clone-source hide').addClass('cloned');
source.appendTo("#newArea");
}
$(document).on('click', 'button[id="duplicate"]', function(e) {
e.preventDefault();
cloningElement($(this));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clone-source" id="product">
<form action="/action_page.php">
<fieldset>
<legend>Product information:</legend>
Name:<br>
<input type="text" name="name">
<br>
Size :<br>
<input type="text" name="size">
<br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
<button type="button" id="duplicate">Duplicate</button>
</div>
<div id="newArea">
</div>

Angular validations - Enabling/Disabling input fields changes validity of form

I have a form. In which I have input fields and I am doing some validation based on input. Also, there is a submit button which enables only if form is valid.
In this form I am enabling/disabling input field in one of the flow.
Initially, when the fields are enable and empty, create button is disabled. After i disable and enable the fields, create button becomes enabled. Although input fields are still empty.
More over button which is enabling/disabling this part is outside of this form.
Here is my code
`
<form method="post" novalidate id="example-widgets-form" name="mdnsCtrl.createSubDomainForm" valdr-type="SubDomain">
<div>
<label>Domain Name</label>
<input required type="text" name="subDomainName" placeholder="Domain Name" ng-model="mdnsCtrl.newDomain.name">
</div>
<div>
<label>Description</label>
<input type="text" name="subDomainDescription" placeholder="Description (Optional)" ng-model="mdnsCtrl.newDomain.description">
</div>
<button type="button" aria-label="Create" ng-click="mdnsCtrl.createDomain();"
ng-disabled="mdnsCtrl.createSubDomainForm.$invalid">
<span class="ng-scope">Create</span>
</button>
</div>
</form>
Tried few things like using $setUntouched() and $setPristine(). But nothing is working. Any help will be appreciated.
Adding a codepen example for this: code
Much Thanks.
`

Its not good practice to mix Angular with jQuery. Please read this great post: “Thinking in AngularJS” if I have a jQuery background?
You can easily achieve requested behavior by using ng-disabled="mdnsCtrl.formDisabled"
JS
var ctrl = this;
ctrl.formDisabled = false;
this.disable = function(){
ctrl.formDisabled = true;
};
this.enable = function(){
ctrl.formDisabled = false;
};
HTML
<div>
<label>Domain Name</label>
<input class="input-field" required type="text" name="subDomainName" placeholder="Domain Name"
ng-disabled="mdnsCtrl.formDisabled"
ng-model="mdnsCtrl.name" >
</div>
<div>
<label>Description</label>
<input class="input-field" type="text" name="subDomainDescription"
ng-disabled="mdnsCtrl.formDisabled"
placeholder="Description (Optional)" ng-model="mdnsCtrl.description">
</div>
Fixed Demo Codepen

I think you missed required attribute for Description input..
<input type="text" name="subDomainDescription" required ng-model="mdnsCtrl.newDomain.description">

Angular blur validation preventing submission of separate form

I have an Angular page with a form for adding people, and a button (outside this form) to submit the list of people.
When the user focuses on a text input in the form, and then clicks to submit the list, the validation error from the text input appears but the submit event never occurs.
An example of this issue here: http://plnkr.co/edit/6Z0UUs
<div ng-controller="MyCtrl as vm">
<form name="form1" novalidate="">
<input type="text" name="field1" ng-model="vm.name" required>
<div ng-messages="form1.field1.$error" ng-if="form1.field1.$touched">
<label ng-message="required">Name is required</label>
</div>
<!--
This form adds a person to a list. I've not included this code to keep the example simple
<input type="submit" value="Add person">
-->
</form>
<button ng-click="vm.submit()">Submit list</button>
</div>
-
angular.module('myApp',[])
.controller('MyCtrl', function() {
var vm = this;
vm.name = '';
vm.submit = function () {
alert('submitted');
};
});
To replicate:
Click on the text input but leave blank
Click submit
Current behavior: "Name is required" appears thanks to the validation. Clicking 'Submit' again displays the 'submitted' alert.
Expected behavior: "Name is required" appears thanks to the validation and the 'submitted' alert appears.
Desired behavior: The 'submitted' alert appears and I add some code to vm.submit() to hide the 'Name is required' validation message as it's not important when the list is submitted.
I've observed that removing the ng-messages block fixes the issue, but I do need to show a validation message. Using a more basic directive (ng-show) to show the validation message instead does not help.
Any insights into what I'm doing wrong, or workarounds to achieve my desired behavior, would be great!

[Modified Answer] :
Here is a working plunker : http://plnkr.co/edit/JCyRi8xp4L3FtafABblS?p=preview
vm.preventDefaultIfSubmitted = function($event){
if($event.relatedTarget.id == "submit"){
$event.stopImmediatePropagation();
}
};
The idea is to get the $event when the blur occurs and then to look at the id of the relatedTarget (which is your button in this case) and if it is then you cancel the $event, otherwise you keep it.
That way if you click anywhere your validation message appears and if you click on submit it doesnt

May this help for form validation
<form role="form" name="projectBriefFrm">
<div class="form-group">
<label for="project_title">Project Title
<sup>*</sup>
</label>
<input ng-model="project.title" ng-required="true" type="text" class="form-control" name="title" placeholder="Untitled Project"
/>
<div class="row">
<span class="errorMessage" ng-show="!isProjectModelValid && projectBriefFrm.title.$invalid">Please provide title</span>
</div>
<div class="container" id="editor-title">
<label for="project_brief">Project Brief
<sup>*</sup>
</label>
<div class="row" id="editor">
<div class="col-lg-12 nopadding">
<textarea ng-model="project.brief" name="brief" cult-editor ng-required="true"></textarea>
</div>
</div>
</div>
<div class="row">
<span class="errorMessage" ng-show="!isProjectModelValid && projectBriefFrm.brief.$invalid">Please provide project brief</span>
</div>
</div>
</form>

jQuery.validationEngine v2.6.1 Only Validates Sometimes?

The code appears to be hooked up (like this)
jQuery("#contactForm").validationEngine();
because it will validate and raise an error bubble if:
you tab out of required field without any input
you type at least one character into a field that requires more and then click the submit button
But it will not validate and raise an error bubble if you do nothing at all except click the submit button. In that case, it just submits. Once you click in the field or enter anything at all, it seems to work.
What can I be looking for that I've mis-configured?
The HTML:
<form class = "contactform" id = "contactForm">
<fieldset>
<div class="contactform-name contactform-field">
<label class="contactform-label" for="contactform-name">Name:
<br>
</label>
<input class="validate[required,minSize[8]] contactform-input" type="text" id="contactform-name" name="name" />
</div>
<div class="contactform-email contactform-field">
<label class="contactform-label" for="contactform-email">Email Address:<br></label>
<input value class="validate[required,custom[email]] contactform-input" type="email" id="contactform-email" name="contactform-email" />
</div>
<div class="contactform-text contactform-field">
<label class="contactform-label" for="contactform-text">Message:
<br>
</label>
<textarea class="validate[required,minSize[12]]contactform-input" name="text" id="contactform-text" > </textarea>
</div>
<input class="contactform-button" type="submit" name="submit" value="Send" />
</fieldset>
</form>
The JavaScript (it's running in Meteor):
Template.Contact.rendered = function () {
jQuery("#contactForm").validationEngine();
}

I've never used this engine, but from the docs I found that 'attach' will attach the validator to form.submit. Can it be as simple as that?
https://github.com/posabsolute/jQuery-Validation-Engine#attach
EDIT:
You can also do stuff to the submit-event (if the tip above won't help).
Something like this (not tested, but should put you in the correct path):
Template.templateName.events({
'submit': function(event) {
// Prevent the submit with preventDefault()
event.preventDefault();
// Do something to check the submit etc.
}
});