maestrooo / ember-cli-html5-validation Goto Github PK

Setting title attribute but not working for input type='text'. It does work for input type='checkbox' however.

{{input type="text" placeholder="Email" valueBinding="email" required='required' title='custom error message'}}

Example

// template
{{#validatable-form class="form-horizontal" action="save"}}
  <button>test</button>
{{/validatable-form}}

// controller
save() {
    throw new Error("test");
}

I think modiyfing:
https://github.com/maestrooo/ember-cli-html5-validation/blob/master/addon/components/validatable-form.js#L33

To this would help:

submit: function(event) {
  event.preventDefault();
  ...
  return false;
},

It would be nice to achieve instant validation on an input, simply by specifying on the element:

<label for = "username">Username</label>
{{input type="email" valueBinding="username" id="username" placeholder="Username" required="required" autofocus="autofocus" autocomplete="email" validateOn="keydown"}}

Where the validateOn="keydown" denotes that the validation on that individual input should occur whenever the user presses a key while focused on that input.

I am open to other suggestions on how to override this functionality. Feedback appreciated.

From the readme

Note: the async-button component will automatically add the disabled attribute when isValid is false.

Why not also add the disabled attribute when isLoading is true? I want to prevent users from double clicking the submit button and as the async button currently works I can easily send double or triple requests.

My work around is to hookup isValid to a component level method that just sets it to false if isLoading is true but wondering if this could be the default behavior.

Happy to writeup a patch if the behavior is desired.

Have the {{#validatable-form action="save"}} {{/validatable-form}} around my form but not working for me.

I have separate components that are pulled into the form and even tried putting on the actual component. but still form is save and not prevented if not filled in.

Any suggestions. Still trying to learn the workings of ember-cli using version 0.2.5

While the current implementation works, using a <p> tag, the error message is probably better off as a <label> element, with a for={{inputID}}.

The current implementation also lacks proper aria roles: in this case, the <p> element should have the role="alert" on it, as in the example here.

Perhaps, in the future, you could allow users to override the component template entirely...

I am willing to contribute these accessibility changes, if you approve.

I included your addon into my application. It is causing my phantomjs unit tests to hang and not proceed.

I am using:
ember cli: 0.2.7
ember: 1.13

it seems somewhat similar to emberjs/ember-cli-babel#29

https://github.com/maestrooo/ember-cli-html5-validation/blob/master/addon/mixins/validatable-input.js#L100

I'm thinking it does, but I could be wrong. If it does then it might not play nice with other addons or a developer's own customizations of these components. I think just adding namespaces to your on jquery calls will fix this and make it easier to just remove all your event listeners.

On Ember 1.10 - 1.110-beta.4, and on Ember CLi 0.1.8 - 0.2.0-beta.1 I get

Could not find module `ember-cli-html5-validation/ext/checkbox` imported from `dashboard/initializers/html5-validation`

It's most likely not to be an issue with this addon, rather something with my combination of packages, but I was wondering if anyone else is experiencing the same?

this is what I tried, but not working... "required, class, title" for radio buttons in ember-cli
{{#each field.proxiedValues as |val|}}
{{csp-radio
name=field.key
value=val.value
groupValue=field.value
checked=field.value
required=true
class="required"
title="Please select an option"
}}
{{val.label}}
  
{{/each}}

Came across this after building with latest rev - 0.17. Rolling back to 0.16 works fine.

Last update is the cause - a25b5e6#diff-b01c322b11fefa66b08bed71afb9e5fbR168

rm -rf dist tmp
ember build --environment=production

Unexpected character '`'
Error at new JS_Parse_Error (/tmp/build_24c9b6c226a8df7be52cd0e61d499141/node_modules/ember-cli-uglify/node_modules/broccoli-uglify-sourcemap/node_modules/uglify-js/lib/parse.js:196:18)

perhaps this would be fine:

element.after('<label class="input-error" role="alert" for="' + element.attr("id") + '">' + errorMessage + '</label>');

ember-cli: 0.2.7
ember-cli-uglify: 1.2.0

I noticed validation is missing for these inputs. Are there any plans of implementing?

Hello. I am evaluating the different EmberJS form libraries. I downloaded the latest release (0.0.16) and tried the follow steps but got an error.

>npm install & bower install
>ember serve
version: 0.1.4
Could not find watchman, falling back to NodeWatcher for file system events
Livereload server on port 35730
Serving on http://0.0.0.0:4200/
Path or pattern "bower_components/jquery/dist/jquery.js" did not match any files
Error: Path or pattern "bower_components/jquery/dist/jquery.js" did not match any fil

I then tried:

bower install --save-dev jquery
bower cached        git://github.com/jquery/jquery.git#2.1.3
bower validate      2.1.3 against git://github.com/jquery/jquery.git#*
bower cached        git://github.com/jquery/jquery.git#2.1.3
bower validate      2.1.3 against git://github.com/jquery/jquery.git#>= 1.7.0 < 2.2.0

Unable to find a suitable version for jquery, please choose one:
    1) jquery#~2.0 which resolved to 2.0.3 and is required by ember-cli-html5-validation 
    2) jquery#>= 1.7.0 < 2.2.0 which resolved to 2.1.3 and is required by ember#1.8.1 
    3) jquery#~2.1.3 which resolved to 2.1.3Prefix the choice with ! to persist it to bower.json
? Answer:: 1

Still did not work :(. Any ideas? It would be awesome if there was a demo hosted somewhere like Heroku so that people could test these forms without downloading.
Thank you.

The HTML 5 Min validation is not working.

My form looks like,

{{#validatable-form action="createAccount" class="paper-form-box"}}
  {{input placeholder='Password'  type='password' value=password required=true min="6"}}
  {{input placeholder='Confirm Password'  type='password' value=passwordConfirmation required=true min=6}}
{{/validatable-form}}

The required validation is happening correctly. But the min validation doesn't seem to work at all.

PS: I tried both number and string as value for min.