HTML5 form validation: Default = invalid, is this normal behavior? - forms

I am building a form using HTML5 form validation.
I have the CSS classes input:valid and input:invalid defined. Some of the input fields are marked as required, but not all of them. Is it normal that the fields that aren't marked as required are valid by default, meaning in my case have a green background? And is it normal that required fields are invalid by default?
If this is normal: Why did they make it that way? In my eyes it is not very user friendly to mark a field as valid oder invalid before something was entered. Is there anything I can do besides JavaScript?

Yes, it's normal behaviour. Whenever user entered anything or not, he should know that field, marked as required, will be invalid until he will enter anything that matches pattern (or just anything :) ).
If for some reason you don't like such behaviour - sorry, but you should use JavaScript.

Related

Vue Element UI - Default el-input-number to empty field instead of a number

Creating a form with no values and would like the input field to default to empty for two reasons:
Want users to be able to see the placeholder text.
Having a default number means the users can ignore the field by default. (I know I can validate the field, but that is just a bad user experience.)
The problem:
el-input-number fields default to a number (0 or whatever the :min value is set to).
This covers up the placeholder text.
The users can click save with the default number still in place. (I will validate, but don't want users to have to submit a bad value to know what to do.)
Does anyone know how to make the input field have the default value be just empty?
just give it a default value of undefined
https://codepen.io/rugia/pen/bGEoWaB?editors=1010

Angular Material: Usage of errorStateMatcher with ngFor

I'm using Angular 6.0.9 and Angular Material 6.5.4. In my form I have an ngFor loop for the inputs with an errorStateMatcher to validate the input.
The problem is that if the content of an input field is invalid, all other fields will also be marked as invalid (even if they are not dirty). I want to make sure that only the current field that is actually invalid is marked as red.
See a self-explanatory example on stackblitz:
https://stackblitz.com/edit/angular-s1jyhw?file=app%2Finput-error-state-matcher-example.html
Your inputs all share the same form control emailFormControl. You need a separate form control for each input. It is okay to use the same ErrorStateMatcher but not FormControl

Disable escape in Zend Form Element Submit

I can't disable escaping in a Zend_Form_Element_Submit, so when the label has special characters it won't display it's value..
This is my actual Zend Form piece of code:
$this->submit = new Zend_Form_Element_Submit('submit');
$this->submit->setLabel('Iniciar Sesión');
$this->submit->setIgnore(true);
$this->addElement($this->submit);
I've tried $this->submit->getDecorator('Label')->setOption('escape', false); but I obtain an "non-object" error (maybe submit isn't using the "Label" Decorator)..
I've also tried as suggested $this->submit->setAttrib('escape', false); but no text will be shown either.. Any idea? Thanks
Should be as simple as doing this:
$element->addDecorator('Label', аrray('escape'=>false));
Or see setEscape(). http://framework.zend.com/manual/1.12/en/zend.form.standardDecorators.html
Regarding failure to retrieve named decorator... Try getDecorators() Do you see 'label' in the results?
There is no Label decorator for submit form element by default (this is why you get the error).
The $this->submit->setLabel('Iniciar Sesión'); value goes to Zend_View_Helper_FormSubmit, which always does escaping and uses the label as a value.
The helper used by the Submit element escapes by default. Unlike with the label decorator, submit labels are included in a HTML attribute so they need to be escaped.
Your label - Iniciar Sesión - is a perfectly valid UTF-8 string, so the escaped version of it will be the same. If your label is not appearing then something else is going wrong. I'd guess that your page is being served using a charset that doesn't match what Zend View is using (UTF-8 by default).
View the page source to see what actually gets output - that might give you some more clues. Alternatively if the page this form is on is public, if you can provide a URL we might be able to spot the issue.
I ran into a similar issue. In my instance, I added both a label and a description to a text field element. This line of code allowed me to turn off the html escaping for the description attached to that field element:
$form->getElement('txtUPC')->getDecorator('description')->setOption('escape', false);
In my testing, the setEscape() was not recognized by the form elements or their decorators.

Confirm password value lost during postback in zend framwork?

I am working with Zend Framework. In my Zend form when there is post back or validation error all the fields contain there values but confirm password lost it's value.How to solve this issue.
By default password fields to not include the submitted value, since doing so somewhat defeats the point of obfuscating the password with *. However you can pass the 'renderPassword' option to the password field to change this behaviour.
There's an example of usage on the patch where the feature was introduced: http://framework.zend.com/issues/browse/ZF-2860
you can try with this option.
you can get the form in view and render all elements one by one like this
and you can set value also.
$confpassword = $this->form->getElement('confpassword');
$confpassword->setValue($_POST['confpassword']);
echo $confpassword;

I'm not specifying the form action but it (automatically) gives different values in some cases

I'm creating my form using the Form helper, so the action of the form is specified automatically....
this form is used for editing a post..
so, the URL has the structure: mywebsite.com/posts/edit/id
and the form's action should be automatically generated as posts/edit/id
but the problem is, in some cases, I open the HTML code and I find that the form's action is only posts/edit without the id which causes the update to fail...
I spent a lot of time to figure out what situation brings this wrong action:
i'm generating fields dynamically (using javascript & ajax) depending on the post's category..
when the value of one of the dynamically generated fields is invalid, the generated action becomes posts/edit !!
I really need help, cuz I don't know why this is happening !!!
and I don't wanna waste more time digging into the core of cakephp...
so, if any of cakephp experts has an idea about this, plz help me !!
thank you in advance !
Use the url parameter, which allows you to explicitly define a url for the form:
echo $form->create('Post', array('url' => $html->url(array('action'=>'edit', $id))));
It sounds like $id probably isn't getting set, because it should be getting passed along if it is. You need to make sure it's set to edit the record in question. Make sure your javascript is including the hidden field with the record's id in it.
Normally done like this, with the form helper: echo $this->Form->input('id');
Also, if one of the fields is invalid, the form shouldn't actually be submitting properly, if you are using cake's validation, so this is to be expected.