Let's say that i have in my form:
{{ Form::email('fieldname', null, array()) }}
I fill this input as following :
thisisntanemailadress
After clicking on the submit button, a popup appears and says that this is not a valid email address, which prevents my form to get submitted.
How can i disable/configure all popup messages like that, except using Form::text() ?
This isn't caused by Laravel. It's actually the browser attempting to validating the input fields value before allowing the user to submit the form. This is triggered when you use a HTML5 input type, these include email, url, number, tel, date, and several others.
The Form helper method you are using will generate the following HTML:
<input type="email" name="fieldname">
Most modern browsers will see the type="email" and attempt to validate any input before allowing you to submit the form.
If you don't want the browser to validate a specific field you can add the novalidate attribute to that fields input tag. For the form helper method you are using this can be done via the third parameter.
{{ Form::email('fieldname', null, array('novalidate'=> 'novalidate')) }}
Alternatively you can disable browser validation for an entire form by adding the novalidate attribute to the Form tag.
<form method="" action="" novalidate> ... </form>
Related
I have a form with an input of type=url. I want to show a custom message when the user tries to submit an invalid URL.
But, I don't want to re-check the url validity with custom javascript. I want the browser to validate, but I want a custom message. Is there an event I could listen to or some other property I could customize?
You can set the title with the pattern validation:
<form action="" method="get">
<input id="myURL"
name="myURL"
type="url"
required
pattern=".*\.myco\..*"
title="The URL must be in a Myco domain">
<input type="submit">
</form>
I am using Angular 2 and I have a form with input as follows (simplified for readability's sake):
<input class="body-text1" type="text" [(ngModel)]="model.name" name="name" required minlength="1">
<!--more, similar inputs -->
I have my own angular validation, but the first input field gets a popup that is relevant to the input. For example, a plain text required input will receive a popup that says "Please fill out this field." while an input marked with type=email will say something like "Invalid email, must have #" (I forget the exact email popup text).
As far as I can tell, I did not add these popups in. I have tried adding formnovalidate / novalidate as attributes to the inputs based on a question that looked similar but it did not help.
You might need to add novalidate attribute to your form to prevent Browser default behaviour.
<form novalidate>
This popup shows because the required attribute is on the element. If you remove this, the popup will be gone, so will the validation be though.
I would like to know if there is a preference to using ng-click on a submit button or just having a ng-submit on a form?
My assumption is that we should use ng-submit on all forms and use ng-click on anything that isn't a form.
I know the differences that are listed below:
ng-submit allows the user to press enter when focused on a form where ng-click doesn't
ng-click can be used on any element where as ng-submit only can be applied to a form element.
I was wondering if anyone can add anything else to this list as I would like to know what the norm is in a angular project.
If we want the form not to be submitted when it is invalid, then instead of ng-click on the button, we will use ng-submit directive on the form itself
<div class="row">
<form name="adduser" ng-submit="AddUser(adduser.$valid)">
<div id="name-group" class="form-group-lg">
<input type="text"
required
name="name"
ng-model="userfullName"
class="form-control"
placeholder="Full Name">
</div>
In the ng-submit we calling a function AddUser from the controller with a parameter formname.$valid. This submit function will be only called when form is valid or in other words all the user input of the form is valid. Keep in mind that in this case from would not be submitted if form is not valid
When we use ng-click , form will be submitted even if it is invalid. Two observations for ng-click are as follows:
We were able to submit the form even if form was not valid
For the invalid inputs, the value was set to undefined in the controller
Out of experience, for mobile apps using Angular and Ionic, I used ng-click because even when the form isn't valid, the mobile keyboard arrow (Android) or GO (iOS) is enabled and will still submit it anyway. I had to use ng-click to avoid validation problems.
On web, I use ng-submit simply because, like you said, it submits on enter.
I have a form that contains an input field for an email address. The form doesn't have a submit button. Instead it has the Stripe checkout.js script which provides a button that triggers a roundtrip to Stripe (to process a credit card) before submitting the form. The checkout.js script allows an optional variable data-email which makes it possible to pass a preset email address to the Stripe checkout form. I'd like to set the data-email variable with the value of the email address input field on my own form.
Here's the form and the script:
<form role="form" class="new_user" id="new_user" action="/users" method="post">
<label for="user_email">Email</label>
<input class="form-control" type="email" value="" name="user[email]" id="user_email" />
<script src="https://checkout.stripe.com/v2/checkout.js"
class="stripe-button"
data-email=document.getElementById('user_email').value
data-key="stripe_key"
data-description="Product"
data-amount="500">
</script>
</form>
I know I need to use:
data-email=document.getElementById('user_email').value
But the data-email isn't getting set. Do I need to add an onchange property to the input field? What would that look like? Do I need more than that?
If the user is entering his email on the page, you might as well just update the script as they type:
var stripe = document.getElementById("stripe");
document.getElementById("email").onkeypress = function () {
stripe.setAttribute("data-email", this.value);
}
<input id="email">
<script id="stripe"></script>
If you run the snippet and inspect the input element, then type, you'll see the data-email attribute update for the given stripe script tag. You should be able to adapt this to your form.
How to check the required fields of a form before submitting it in javascript ?
I'm working with Angularjs and as you probably know, I never reload the page.
I have created input text like this :
<input type="text" name="truck" ng-model="my model" typeahead="my typeahead" typeahead-min-length="1" required/>
Here is my submit button at the end of the form :
<button type="submit" ng-click="saveDelivery(newDelivery)" class="btn btn-primary">Create the delivery</button>
But when I submit, I go into "saveDelivery" first, and then I have the message from Google chrome : "Please fill in this field..."
How can I do to check the input before submitting ?
Look into the ng-submit directive.
This essentially looks in your defined form for any validation defined in your markup (required, type). All you have to do is take your click action and place it at the top of your form in the ng-submit directive.
<form ng-submit="saveDelivery(newDelivery)">
<input type="text" name="truck" ng-model="my model" typeahead="my typeahead" typeahead-min-length="1" required/>
<button type="submit" class="btn btn-primary">Create the delivery</button>
</form>
Because your button is defined as type 'submit', this will submit the form, preforming the 'ng-click' action for you. Angular will essentially hijack the submit, and validate your form before submitting it to 'saveDelivery'. All you have to do is define what you want validated, whether it is 'required' input, or it you do type="email" on your input, it will use HTML 5 email validation and make sure it is an email address.
Angular made it VERY easy to add validation to any form. Once validation is passed, Angular will then trigger your saveDelivery method!
Edit: 2014-02-12 - Here is a very simple example. Try clicking the submit button when the input field has nothing in it. Chrome will show validation message, enter something and the alert will run, but the form will not submit.
Example: http://plnkr.co/edit/uGT3scGJtCVJkWE0B7zp?p=preview
The browser will do the validation when the form is submitted I think (Note: not verified, this is just how I understand the flow of events. I may be wrong)
You might want to handle the form submit event to do your saveDelivery call as that (form submit) ought to happen after the validation but before the form is actually posted back. saveDelivery will finish before the form submits, and you can cancel it if needed also and do your own thing...
For example this answer to another post shows how to handle the form submit and prevent it from occuring; this might be useful if you want to call your saveDelivery method to do the actual saving but don't want the form to postback
https://stackoverflow.com/a/5384732/94099