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.
}
});
Related
I have an Angular form inside a ng2 popup:
<popup>
Sign up for our Newsletter! <form #f="ngForm" (ngSubmit)="onSubmit()" novalidate>
</button> <input type="email"/>
<button>Submit</button>
</form>
</popup>
<button class="submit" (click)="ClickButton()">Sign up for our Newsletter </button>
here is the onClick event function:
constructor(private popup:Popup) { }
testAlert() { ClickButton(){
alert("Newsletter event works"); this.popup.options = {
widthProsentage: 15,
showButtons: false,
header: "Sign up for our Newsletter!",
}
this.popup.show(this.popup.options);
}
It works fine but I am able to submit her even if the input is blank, how can I make so that it does not submit if it is clicked empty
I tried using RegEx but it did not work
Consider adding validation.
Something like this:
<div class="form-group row">
<label class="col-md-2 col-form-label"
for="userNameId">User Name</label>
<div class="col-md-8">
<input class="form-control"
id="userNameId"
type="text"
placeholder="User Name (required)"
required
(ngModel)="userName"
name="userName"
#userNameVar="ngModel"
[ngClass]="{'is-invalid': (userNameVar.touched || userNameVar.dirty) && !userNameVar.valid }" />
<span class="invalid-feedback">
<span *ngIf="userNameVar.errors?.required">
User name is required.
</span>
</span>
</div>
</div>
You can then disable the submit button if the fields are not valid:
<button class="btn btn-primary"
type="submit"
style="width:80px;margin-right:10px"
[disabled]="!loginForm.valid">
Log In
</button>
(ngSubmit) is built-in event emitter inside of Angular ngForm and is directly related to button element which is kind of a trigger for form submission.
Therefore, as lealceldeiro said, you only need onSubmit function and button intended for submission inside of your form tag.
Please provide live demo so we can see the whole file (.ts particularly).
Setting the validation properly depends on what kind of forms you're going to use (template or ReactiveForms).
See more about proper ngForm usage in official documentation.
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">
I'm dealing with a awful issue, I developed a form with multi fields set (using normal div)
and when I test the submit action I got in the URL the one input not filled, also hidden in
the markup as showed bellow.
http://127.0.0.1:8000/exform.html?user=test&pwd=QWERT1234&user_reg=
And here is the code for the form:
<form id="exform">
<div class="fields" id="login">
<div class="txt">
<label for="user"></label>
<input id="user" type="text" name="user"/>
</div>
<div class="txt">
<label for="pwd"</label>
<input id="pwd" type="password" name="pwd" />
</div>
<input type="submit" value="test" id="test"/>
</div>
<div class="fields" id="register">
<div class="txt">
<label for="user_reg"></label>
<input id="user_reg" name="user_reg" type="text"/>
</div>
<div class="txt">
<label for="pwd2"></label>
<input id="pwd2" type="password" />
</div>
<div class="txt">
<label for="pwdc"></label>
<input id="pwdc" type="password"/>
</div>
<div class="buttons">
<input type="submit" value="OK" id="ok"/>
</div>
</div>
</form>
The strange is that the second field set isn't available in the screen, because in the css
there is a rule to only show the first group with the class "fields"
/*Hide all except first div with class div*/
#exform .fields:not(:first-of-type) {
display: none;
}
So I really want to know why the form is submitting fields out of the scope.
For example, if the second group fieldset is used, when the button submit with value OK is clicked the result produced is similar. In the URL, only the user_reg field parameter is showed filled with the two another fields for the first group without values:
http://127.0.0.1:8000/exform.html?user=&pwd=&user_reg=test
The following code is for submit test:
$(function() {
$('#test').click(function() {
$('#exform').submit(function(event) {
console.log("form Submited:" + document.forms['exform'] + "test");
});
});
$('#ok').click(function() {
$('#exform').submit(function(event) {
console.log("form Submited:" + document.forms['exform'] + "ok");
});
});
});
Doesn't matter I'm got the same URL results
This
http://127.0.0.1:8000/exform.html?user=test&pwd=QWERT1234&user_reg=
or
http://127.0.0.1:8000/exform.html?user=&pwd=&user_reg=test
Instead I'm receiving:
// on #test click
http://127.0.0.1:8000/exform.html?user=test&pwd=QWERT1234
// on #ok click
http://127.0.0.1:8000/exform.html?user_reg=test&pwd2=QWERT1234&pwdc=QWERT123
I can't retrieve the values for pwd2 and pwdc fields in the URL as parameters obtained after submitting.
This got me crazy.
If you do not specify the method method of the form, the default is GET while submitting it. This is the reason to see all form elements in your URL.
Try this:
<form id="exform" method="post">
<!-- form contents -->
See here for details.
When you submit form you submit all it's input fields at ones.
Even if you hide something with css it still exists in html.
When you processed the form you can add a hidden field "input type="hidden"" and give that field a value that tells your script witch fields you want processed in witch case.
And i also fink that post method is better (more secure) especially if you send password.
I am working on a system where users are allowed to add books to their library. I am using a jquery UI dialog box and have inserted about 20 rows into the database using the first half of this script.
However, as I was adding in the second half all of a sudden the post information is not showing up on the posted page and I am completely lost as to why.
This was supposed to be a quick addition that's turned into a headache.
FORM:
<form id="addbookform" action="../models/Books/addBook_submit.cfm" method="POST">
<div style="display: none;" id="addBook" title="Add a Book to Your Library">
<input type="hidden" id="InputType" name="InputType" value="Add"/>
<input type="hidden" id="bookempID" name="bookempID"/>
<label class="labelstyle" >ISBN:</label>
<input type="text" maxlength="17" id="ISBN" name="ISBN">
<label class="labelstyle" >Title:</label>
<input type="text" maxlength="100" size="50" id="Title" name="Title">*
<label class="labelstyle">Author's First Name: </label>
<input type="text" maxlength="50" id="AFName" name="AFName">
<label class="labelstyle">Author's Middle Name:</label>
<input type="text" maxlength="50" id="AMName" name="AMName">
<label class="labelstyle">Author's Last Name:</label>
<input type="text" maxlength="50" id="ALName" name="ALName">*
<label class="labelstyle">Date Read:</label>
<input type="text" id="DateRead" name="DateRead">
</div>
</form>
Javascript:
function addBook() {
$("#addBook").dialog({
autoOpen: true,
width: ($(document).width()*.55),
height: ($(document).height()*.7),
modal: true,
buttons: {
"Add Book": function() {
//checkBook();
$('#addbookform').submit();
},
Cancel: function() { $(this).dialog("close"); }
}
});
}
The above piece was working before I started building checkBook(). However, now it's no longer working.
Edit:
The form is initiated by:
<input type="button" class="buttonstyle" value="Add Book" onclick="addBook()" />
(this works)
I think your form must be "visible" in order for the elements to be posted. jQuery can certainly see and access all of the elements regardless of css Display type, but I believe the "submit" action requires the elements that are getting posted to the server be visible. I noticed all the form elements you are attempting to submit are inside of a DIV element with the css property of Display:none;
It seems to me that you are binding a submit event to the form somewhere else in the code.
So, you can try submitting the form without jQuery.
$('#addbookform')[0].submit();
Or unbind any event that might be in the form.
$('#addbookform').off().submit();
I have created a multi-part form and need to validate completed fields in visible fieldsets on the form. If all required fields are completed, the the next step button will be enabled.
So Far I have played with a few options none of which are 100% effective
HTML:
<div id="set1">
<fieldset>
<div>
<label>field 1</label>
<input name="f1" type="text" /><br />
<span class="error"></span>
</div>
<div>
<label>field 2</label>
<input name="f2" type="text" /><br />
</div>
</fieldset>
</div>
<div id="set2">
<fieldset>
<div>
<label>field 3</label>
<input name="f3" type="text" /><br />
<span class="error"></span>
</div>
.
.
.
</fieldset>
</div>
jQuery:
$input = $('fieldset:visible div:has(span[class="error"]) input');
$next = $('fieldset:visible .button');
$input.keyup(function() {
$input.each(function() {
var trigger = false;
$input.each(function() {
if (!$(this).val()) {
trigger = true;
}
});
trigger ? $next.attr('class', 'disable') : $next.removeAttr('class');
});
});
Could someone help me understand what I am doing wrong? It appears the keyup event is not firing.
You should use jQuery validator. It will make your life a lot easier:
jQuery Validation
First thing, the keyup event will be fired, don't worry. Second thing, there is a heavy error at line if (!$(this).val()) { This spelling caused by wrong thinking in standard javascript. Translated to it you wanted to test if the value exists or not. The truth is, the value does always exists. It is just "" or a real value.
Look at my example. After some corrections it works as you wanted, hopefully.