Conditionally required fields and disabled inputs
My form has a bunch of address fields (street, city, country, province, postal code) that need to be filled out over and over again. To make it easier for the user, I've added a "copy from" selector where they can choose an address they've previously used. When they do this, the form fields are filled开发者_开发技巧 in automatically and then disabled. This way they can clearly see what they're about to submit.
The problem is, if the fields are disabled, W3 says the inputs won't be submitted. That would be fine, because I can get all the data I need from the selector, except that now the form fails validation.
I figure I have two options:
- Re-enable the form fields just before submitting the form (but this is a bit of hack)
- Make all the address fields optional. But then I need to add a bunch of
clean_methods to make sure they actually are filled in when you don't use the preset selector. Also, I'm using the address form all over the site, and in some places they truly are required, so I'd prefer not to make the fields optional. Although, I guess I could just copy-paste the address form and make a special case for this page.
Thoughts? What approach should I take?
A couple of thoughts. They might give you some ideas.
- If the users are using an address they have previously used and they cannot edit the form (fields are disabled), do they need an address form at all? Can you not display the previous address without a form and pass a reference to it as a hidden parameter?
- If the users can edit the previously selected address (I think Amazon does this) then wouldn't it make sense to leave the form fields editable?
I've been facing a similar problem, where fields are required but their values are fetched from another form as such. What I decided to do is the following:
- Assign a class to all the inputs that are required but do not require a manual input
- Create a function that automatically disables all user input from the keyboard or context menu
Here's my solution: HTML FILE WITH FORM
<head>
<script src='file1.js'></script>
</head>
<body>
<form method='post'>
<input class='RequiredNoManual'>
<input type='submit'>
</form>
</body>
</html>
JS FILE
window.addEventListener('load', configureNoManualInputFields);
function configureNoManualInputFields()
{
var elements = document.getElementsByClassName('RequiredNoManual');
for(var i =0; i<elements.length; i++)
{
elements[i].oncut = function(){event.preventDefault();};
elements[i].oncopy = function(){event.preventDefault();};
elements[i].onkeydown = function(){event.preventDefault();};
elements[i].onkeypress = function(){event.preventDefault();};
elements[i].setAttribute('required', 'required');
}
}
加载中,请稍侯......
精彩评论