Materialize CSS Showing errors on form fields - javascript

Is it possible to set the validation error color on form fields manually? I couldn't really figure out how it was doing the validation on their site. Seems like the browser is doing it automatically based on the type attribute. But what CSS would I need to attach to trigger that state? I need to do a custom validation on a text field and the one that browser does automatically is not enough.

As I already wrote as a comment.
You just need to add the invalid class to your element.
Next time you could use the inspect element tool which is built-in in Chrome.

Related

After setting value property, how to cause textarea to update as if it was user input?

I'm building a Chrome extension that enables the user to insert canned responses into Youtube comments on their channel. I insert the text using textarea's value property:
getHighlightedComment().querySelector("textarea").value = cannedResponseText
The problem is, the textarea doesn't adapt its size and the submit button doesn't get enabled until I type in another letter manually.
I have a different extension installed that has a similar functionality that doesn't have these problems, so it must be possible.
I already tried sending keypress/keydown/keyup events manually, but they seem to not work inside textareas. Nothing happens in response to them.
I guess you need to trigger some event on your field after actual change Here is how you can deal with it.
UPD.
I tried sending keypress/keydown/keyup events but it seems they don't work inside textareas. Nothing happens.
I guess it is more about onchange event.
Also you need to check the CSS of your textarea - rows are not hardcoded, height and max-height is not hardcoded (has value 'auto').
Here are some workarounds to update it with JS - https://stackoverflow.com/a/25621277/9994697

Symfony sfValidators: Dynamically setting a value to be required or not?

I have the following problem:
I have a form where a user can opt to toggle a switch (Yes/No).
If they select Yes, I hide a couple of fields on my template (because they will now automatically be calculated).
The catch is that now, a set of different fields are required to not be empty for the successful submission.
The first fields need not be optional after the switch is clicked (since they are merely hidden but still submitted), but the second set of fields must be non-empty.
Is there a simple way to get this dynamic validation behaviour using Symfony's sfValidator classes, or should I simply hack together a solution using jQuery?
This sounds like a perfect case for the Callback constraint that already exists in Symfony. To quote the linked doc:
The purpose of the Callback constraint is to create completely custom validation rules and to assign any validation errors to specific fields on your object. If you're using validation with forms, this means that you can make these custom errors display next to a specific field, instead of simply at the top of your form.
This solves the backend, you still need to watch out for the required attributes of your fields so HTML5 validation can work properly.

Validating fields in a Sencha Touch app

I am looking a solution similar to the formBindproperty in Ext.js but in ST2.4, validating my form, for example with a red underline in the specified field with an error.
How to do this?
Thank you in advance.
The property in ExtJS that determines if a textfield should be displayed with a red underline if invalid is allowBlank.
The equivalent property in SenchaTouch is required. The default behaviour is to place an asterisk next to the field label (no red line css is provided).
In SenchaTouch there is no form validation like in ExtJS. Therefore the formBind property you bind to buttons and the like in ExtJS to have them set to enabled/disabled does not exist.
The only thing I can think of is to extend the basic form panel and provide your own validation logic. I've implemented this in the following Fiddle. As long as you set any of your textfield items to have a required property that is true then the validation logic will kick in. Likewise the custom panel can be used without validation if none of the textfield items have the required property set.
You could also update the validateFields function I provided to update css classes if you want a visual indication that your form fields are invalid.
Hope this helps.

How do I include an element in a form but separate it physically in the layout

So given a layout like so:
How can I include the value of ComboBox in the submission of the form.
Things that have occurred to me:
Include the combo box as part of the form in terms of markup and position it absolutely. I'm don't get how this would work if the page needs to resize and the combo should remain where it it is in this title bar.
On submission use JS to grab the value and insert it in a hidden field as part of the form submission. This would clearly break without JS but the page is client facing and we are willing to stipulate that JS is required.
I believe I have stated all the restrictions so given that is there another approach? If not how should I choose between the above options?
You obviously could use a a giant form tag.
OR
Two forms, changing the combo and submitting does a full post and adds a hidden to the main form. Then sexy it up with JavaScript (prevent the full post back, and remove the submit button on the combo form)
OR
CSS Positioning as you suggest.
With out seeing some HTML its hard to determine the layout you have. But my first thought would be to use Absolute positioning with CSS.
The other option would be to incorporate the entire page as a part of the form, but this may not be possible due to other functionality on the page that may be necessary
I would say use javascript.
have a hidden input field in the form.
on page load, that input is populated with the ComboBox value.
update the value if the ComboBox select is changed.

Why does the value attribute of a button have specified = false in IE?

I have been looking for an elegant solution to converting a submit button to a button. In Internet Explorer you cannot simply change the type of an input. I couldn't change the attribute on a clone of the object either, so I thought I would manually duplicate it by creating a new object and then iterate through the attributes of the submit button to duplicate them. I am checking if the attribute is specified before setting it, but for some reason the value attribute reads as attrib.specified is false despite having a clear value. Why is this?
Update
I want buttons (<input type="input"...>) to submit when I don't have javascript turned on, and I want to execute javascript instead of submitting when javascript is turned on by way of changing the input type to prevent postbacks and to attach event handlers. I have considered replacing the buttons entirely but I would like to be as consistent as possible for the sake of styling, hence switching to button from a submit type, and I want to preserve everything else associated with the submit button, i.e. style, value etc. I would like to just do submitButton.type = 'button', but MSIE does not like this for some rather obscure reason. I hate wrestling with MSIE.
iirc IE will submit the text between the button tags, rather than its value attribute.
I believe a workaround is to burn down microsoft HQ.
You could use a hidden field, or a type=submit and add text to the button with an image.
What are you trying to achieve?
I suspect noscript tags are the best way to get around the lack of js on the client side. I would just rather have found a solution where js added functionality to an existing page.

Categories