Develop Reference

Material-UI - Is it possible to make the AutoComplete control required?

I spent the better part of yesterday trying to make the AutoComplete control required. The API doesn't have a required attribute and onNewRequest doesn't fire if the textbox is blank, onBlur has a bug and doesn't work, and I'm not sure how to hijack handleSubmit (redux-forms-material-ui) to check if that field is empty. Also I put that control in the list of fields to validate but nothing fires for that control. What am I missing?

Shortly after writing this question I realized code another developer wrote was stepping on the validation. Nothing is wrong with making the control required field by passing it an error message if the control has no selection.

Evaluate validity of fields based on action being performed in Angular

I have a complex Angular form representing a printable document. Form has two buttons to submit the form. One is for saving the working version and another to print the completed form to PDF.
The problem is simple, but more difficult to solve for me. Of course, when you are going to save a working version there will be unfilled fields. There are some allways required fields (such as name and personal ID) which are needed to save the form. Other fields are required only for printing. So the validity of these fields depends on the action (the button clicked by the user). I cannot determine the validity when the user is editing the field (angular validators are fired when fields content is changing), because I dont know which button will be clicked. I need to fire the validation of the whole form after one of the buttons was clicked. At that point I already know the action and can evaluate the validity of the fields (I have a custom angular validator to do this job).
My question is: how to trigger the (re)validation of the whole form from a function? If it is not possible, are there any other solutions to implement the validation described above?
I would prefer a solution where the $valid and $invalid properties of the fields are always set properly. My custom validator can ensure this. But how to trigger it on every field from a function? If it is not possible to trigger the validation by one function call, it is possible to iterate over all fields of the form? (to call the $validate() method of NgModelController)

Jquery val is not working when try to get a value from a form

I've tried to insert a form in woocommerce product page. I've inserted the form in the product page. When the form is submitted I'm trying to get the email (form input value) and validate it accordingly.
The problem is I'm not able to get the value in some theme using jQuery. I see the form and its elements in firebug. But jQuery is not even working for the click event in variable product (woocommerce product page). Here the form is inside their form (which enctype is multipart/form-data), this might be one reason or if I place the form above the variable product form jQuery it works but it returns empty string.
Even if there is some text inside the form input field, it returns empty string.
Here is the form
Here is the jQuery On submit click
jQuery(document).ready(function() {
jQuery('.mailsub').click(function() {
var subaddress = jQuery('.subemail').val();
console.log(subaddress);
if ( jQuery('.subemail').length > 0 ){
console.log('the element with element_id exists in the DOM');
}
//ajax goes here followed by validation for the email
return false;
});
});
I've tried to check whether it is in DOM or not, so I've used the code, it says the element with element_id exists in the DOM.
I'm able to get the form completely work on twentyeleven and defaults themes. It is working in wordpress defaults themes but not in some other third party themes.
What might be the problem? Any suggestion would be much helpful.

The HTML and code as given should mostly work. I'm guessing that there is another element with the class subemail earlier in the document. When you do jQuery(".subemail").val(), jQuery finds all of the matching elements, but then returns the value (if any) of only the first of them.
Side note: If you step through the code with the debugger built into your browser, rather than doing console.log statements, you can inspect variables as the code is running, which is dramatically more educational, usually.
Side note 2: Some browsers submit forms when the user presses Enter in a text field. In that case, the click event on the submit button may not be fired (since the button wasn't clicked). To reliably hook into the form submission process, use the submit event on the form, rather than the click event on the button.
Side note 3: You've said you're using ajax to validate the email address. By default, ajax calls are asynchronous, which means you cannot use the result from the server to decide whether to submit the form, because you don't get the result until after the submit event handler has returned and (probably) the form has already been submitted. You can make the ajax call synchronous, but that locks up the UI of most browsers while the call is in progress, leading to poor user experience. I suggest validating the email address via ajax when the field changes, and then again on the server when it receives the form (you can never rely on client-side validation). That lets you give the user proactive feedback (the on-change validation) without trying to validate it via ajax when submitting the form.

Read only textfield editable via inserted javascript?

I have a form with a read only field for display/submit to the next page purposes.
However, I noticed using developer tools in Chrome, I was able to add an id to an element, use the javascript console to select that element, and change its value. I submitted the form and what do you know - the next page acted on it as if it was the original value.
Now, there shouldn't be any problem with the people using the site I'm building, but it seems like a huge security flaw to me. Isn't the point of read-only to remain constant? If a savvy user to change it around, doesn't that pose a big problem? In fact, I didn't even think you could add and change attributes in chrome.
Please post your thoughts below, and let me know if there's a solution ("disabled" textfield, but setting the disabled property doesn't send the data to the next page).

NEVER trust input from a web form.
The user could, just as easily, remove the readonly attribute and edit the value. The readonly attribute is only something to help the user when filling out the form, so they don't edit a value expecting it to change, when your server actually won't let it be changed. So, always remember to code the behavior on your server first, and have the HTML form be a helpful guide for users to make the form easier to fill out (without having to submit the form several times to get relevant error messages).
To overcome this, if something is readonly and you do not want it edited, you could store the value in your database. Also, values provided by users should always be checked (and sanitized) as no amount of JavaScript, HTML, or CSS is going to prevent someone who knows what they're doing from adding new or changing/removing existing values.

Suggestion needed for NON JavaScript version of an input autocomplete

I'm building an App that is heavy on jQuery. Most of it I can handle without the use of JS and still have a functioning site, however there is one bit that is eluding me. (note, I'm using ASP.NET MVC but that shouldn't matter in this instance)
I have an input field that is making great use of jQuery-UI AutoComplete. The behavior is very simple. The user is asked to input their City, but is given an AutoComplete list of valid cities. If the city is invalid, the server side validation fires and tells them to try again.
If they do select a valid city, the jQuery method updates a hidden field that contains the CityID of the selected city. This is working phenomenally well, and I really like the performance.
Here's where the problem enters. If JS is not available in the browser, the ID field is not updated, and hence the DB is not updated. I am not using the AutoComplete input on the server side at all, just the ID field. What would be a good solution to circumvent this issue?

Default to a select element containing the cities as options and id's as values, and change it to the autocomplete field with the script on page load.

If for some reason sje397's answer doesn't work for you (it's an elegant solution, unless the city auto-select is based on some other field on-screen, such as a zip code or state), simply POST both fields. When evaluating the POSTed data, if the CITY text box has data, and the hidden field does not, then evaluate the entered city using the same validation method used by the jquery callback. If the hidden field has data, you assume that javascript is enabled and use your current logic.

Several options:
1 - Serve HTML initially that shows the "hidden" input, and doesn't include the "autocomplete" one. When JS loads, have a function edit the DOM to your current situation.
2 - Have the form default to send the "autocomplete" data to the server. Use javascript to edit the "send" function to have it switch to the "hidden" input.

Get the page to by default to send the input of the user over the intertubes to your server, if javascript is enabled, change it so it only sends the ID over instead (using javascript obviously).