Form input hints conflicting with validation plugin - javascript

I'm building an HTML form that validates with the jQuery validation plugin.
Minimal Working Example on JSFiddle
I'm now trying to add hints to my input boxes so that it's easier for the user to see what to enter as the table length increases.
Note that the 'Email' field is validated with the validation plugin. The problem is that the validation plugin is validating based upon hint-text.
I don't want to manually write a bunch of filters that compare against the hint text, so I was wondering if there was an alternative means of setting the hint-text than manually setting $(elem).val()?

You could use "placeholder" instead of "data-hint".
<input type="text" class="email" placeholder="Email" />
http://jsfiddle.net/yc4ZA/

Related

How to validate form before submitting using formsy-react-components?

I'm using formsy-react-components to make a form and I want to validate its input fields before submitting the form.
Is there any way to do that using formsy-react-components?
<form onChange={this.validateForm} onValidSubmit={this.handleSubmit} ref='form'>
<Input type='text' value={this.state.id} className='form- control' validations="isNumeric"></Input>
<Input type='text' value={this.state.name} className='form-control' validations="isAlpha"></Input>
</form>
The inputs with errors have the css class has-error which I then style according to my needs.
Now I want to validate form before changing anything in the input fields or submitting the form. Is there any way to do that?
I've tried looking here: https://github.com/christianalfoni/formsy-react/blob/master/examples/custom-validation/app.js.
But I wasn't able to find what I need.
Maybe someone who has already used this library can guide me how to go about this, or how to validate form when mounting the component.

How to disable the popup that appears for input validation ("Please fill out this field")?

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.

How to turn on/off a field from parsley.js form validation

When validating an email field [name=bar] in a form #foo, I want to switch validation of that field on and off, in relation to a checkbox.
Reading the docs, github issues and stackoverflow answers, I thought setting data-parsley-required="false" and/or data-parsley-validate="false" would be enough.
But it turns out, that all other constraints, like email, min-lenght, max-length are still validated and the input field still validates to an error condition. I would prefer it to validate to success or not at all.
<form id="foo">
<input name="bar"
maxlength="40"
value=""
class="form-control"
data-parsley-validate="false"
data-parsley-required="false"
type="email"
data-parsley-minlength="5"
data-parsley-trigger="input keyup change"
data-parsley-error-message="something is wrong">
</form>
See https://jsfiddle.net/88obg0sj/9/
So how is it possible to turn off field validation in way, it can be re-activated again?
You should tweak the excluded option, for example by adding ", [data-parsley-validate="false"]" to it.
You can follow this way:-
//destroy parsley
$('form').parsley().destroy();
//set required attribute on input to false
$('input').attr('data-parsley-required', 'false');
//reinitialize parsley
$('form').parsley();

Hide form field until earlier field is filled?

I have a registration form that is split. I am looking for a method, preferably using css3, that will allow me to hide a form field until a particular field is validly completed.
For example:
I request "Group Name". When Group Name field is filled with a valid group name, meaning one which exists in a database or xml file (this part requires js, and a dropdown is not an option), then the second field: "Group Password" will appear.
I'm using html5 and css3. I'm willing to use javascript if absolutely necessary. Thanks.
I imagine that I could use something like this:
document.getElementById("groupname").disabled = true
but I am unsure of how to trigger it. Perhaps employing an html5 validation could act as a trigger?
At a glance something like the following seems to work:
:invalid ~ .test {
display: none;
}
<form>
<input type="text" required/> <!-- Displayed -->
<fieldset class="test">
<input type="text"/> <!-- Hidden until top input is filled -->
</fieldset>
</form>
Should be able to handle simple cases. This could then be enhanced using the setCustomValidity call to wire in your validation.

Validation with specfic input types generated from an XML

I am in the midst of trying to come up with the best way for some validation within a generic MVC based XML which outputs the following.
<input name="xxxx" value="xxxx" ValidationType="Email" IsRequired="True" />
Basically if things contain certain elements, we validate it, if it's required than we do, if not, we don't etc etc. I tried some things but it seems the best way to do this would be a the JQuery "contains" method. I also know that that "ValidationType" is not really a valid attribute of input, but the XML outputs it this way. Any feedback would be appreciated. Thanks. I'm trying to do this as non complicated as possible :)
I would recommend using jquery validate plugin. You can validated elements with class-based attributes and add custom validation if need be. for example, should you need an input required. The output would look like this.
<input name="xxxx" value="xxxx" class="required" />
for email validation you can use
<input name="xxxx" value="xxxx" class="required email" />
Then execute the .valid() function to validated

Categories

Resources