I am trying to remove a required attribute from an input on the fly. The general idea is I have a field that is set to required, this field has custom validation with the pattern attribute. When the user clicks a button I am attempting to remove the required field.
I have put together a fiddle here:
https://jsfiddle.net/paulmatos/t1p1wub3/
HTML:
<form>
<input type="text" oninvalid='this.setCustomValidity("Enter a number in the Specified Range");' oninput="try{setCustomValidity('')}catch(e){}" pattern="[0-9]" required="required" name="password" id="password" />
<input type="text" required="required" name="temp" />
<input type="submit" class="btn btn-primary form-control" value="Submit" />
<div class="btn btn-default removeReq">Remove Required</div>
</form>
Jquery:
$('.removeReq').click(function() {
$('#password').removeAttr('required');
});
The issue I am experiencing has to do with the order of submission.
If you click remove required, and then submit the form you will see that it works as intended.
However, if you do those steps in reverse order, click submit first, then remove and try and submit again, you will notice I am still getting the validation error on the first input.
Is there anyway to get around this with this intended functionality, I am trying to get this to work just with the html5 validation.
I did have a look at the fiddle and the only way I could get the behaviour you wanted was by literally detaching, cloning and reinserting the field. Works tho.
$('.removeReq').click(function() {
var password = $('#password').removeAttr('required oninvalid oninput pattern').detach().clone();
$('form').prepend(password);
});
https://jsfiddle.net/t1p1wub3/2/
Think you are getting this due to the code in the oninvalid handler. Try this.
$('.removeReq').click(function() {
$('#password').removeAttr('required oninvalid');
});
You can try this instead of removeAtt():
$('.removeReq').click(function() {
$('#password').prop('required', false);
});
Related
I'm currently trying to add a button that can clear a search input when clicked.
$('.reset-form').click(function({
$('#input-search').val('');
});
<div class="search">
<form>
<input type="text" class="search" required id="input-search" placeholder="Search">
<input type="reset" class="reset-form" value="X">
</form>
</div>
It is resulting in Uncaught SyntaxError: Unexpected string on the 2nd line of js that is attempting to set a value on the search input text. I couldn't see anything wrong in a linter and was hoping for some guidance for why this error might be coming up.
Edit: corrected from .value = ''; to .val(''); and still getting the same syntax error.
There are a couple of issues here. One is the syntax of your event handler. The click() function takes a function as an argument. So do that:
$('.reset-form').click(function() {
$('#input-search').val('');
});
<div class="search">
<form>
<input type="text" class="search" required id="input-search" placeholder="Search">
<input type="reset" class="reset-form" value="X">
</form>
</div>
However, that just solves your syntax error.
The real question you should ask yourself is, "do I need this event handler at all?" The type="reset" you've applied to your second input should automatically clear any form elements inside the same form. So, in this case, it should clear the text field with an id of input-search. Whether that works with any other scripts you may have is a different question...
Replace with
$('.reset-form').click(function({
$('#input-search').val('');
});
I am disabling the inputs using the isFetching prop,
but this is getting reduntant as I have to keep this in every input field.
Is there a way to disable the entire form?
Like a disable property in <form> tag or something?
<form>
<input type="text" disabled={this.props.isFetching} />
<input type="text" disabled={this.props.isFetching} />
</form>
I think this should solve your problem https://stackoverflow.com/a/17186342/3298693.
You should insert your form inside an element <fieldset disabled="disabled">. This will make the whole form disabled.
I had the same issue and this worked for me:
<fieldset disabled={true}>
Where true would be some "prop.setting"...
Just use <input type="text" disabled> wherever you want the input text to be disabled. It hardly takes some time.
I'm familiar with foundation abide a little, I was wondering how can I make the button disable and as the user type it gets validated and change the button to enable for submit.
Form Example:
<form data-abide>
<div class="name-field">
<label>Your name <small>required</small>
<input type="text" required pattern="[a-zA-Z]+">
</label>
<small class="error">Name is required and must be a string.</small>
</div>
<div class="email-field">
<label>Email <small>required</small>
<input type="email" required>
</label>
<small class="error">An email address is required.</small>
</div>
<input id="contactsubmit" class="button" type="submit" value="SEND" disabled>
</form>
Disable:
<input id="contactsubmit" class="button" type="submit" value="SEND" disabled>
Now, as a user keep typing I would like it to be validated and if everything is correct enable the button, I know I can do this with jQuery .change(), But is there any standard way for abide?
I have done a lot of research, but I don't see what I'm trying to achieve, I can do it with bootstrap validation but not foundation.
UPDATE
Here is the plugin I use with bootstrap to achieve what I want, Validator.js.
Not quite what you are looking for because most forms can not be submitted unless your form is validated. Listening to see if the form validates and then enabling a submit button seems like its overkill.
Thus data-abide has this in mind when they created
If a submit event is fired, a valid.fndtn.abide event is triggered
when the form is valid and an invalid.fndtn.abide event is triggered
when the form is invalid.
with that in mind i would enable the button and then
$(form)
.on('invalid.fndtn.abide', function () {
var invalid_fields = $(this).find('[data-invalid]');
// tell the user that invalid fields must be fixed before submit
})
.on('valid.fndtn.abide', function () {
// your submit action here.
});
There is an option in the /foundation.abide.js if you want to change out the validation works
Abide.defaults = {
validateOn: 'fieldChange', // options: fieldChange, manual, submit
try changing it to manual and see if it works like 'abide : {live_validate : true, // validate the form as you go that was in older versions
Disabled Button
I have many forms on my page that are DYNAMICALLY added and I have a button that I want to trigger a reset to all the forms on the page except one.
An example of a dynamically added form is:
<form>
<label for="code">Question code:</label>
<input type="text" id="code" name="code" maxlength="25" class="used"/>
<div class="clear"></div>
<label for="title">Question:</label>
<input type="text" name="titl" name="title" maxlength="255" class="used"/>
<div class="clear"></div>
<label for="hint">Hint:</label>
<input type="text"id="hint" name="hint" class="used"/>
<div class="clear"></div>
<input type="hidden" name="type" value="tapper" class="used">
<input type="hidden" name="optionsType" value="none" class="used">
<input type="reset" value="Cancel" class="delete-button">
<input type="button" value="Add" class="action-button" onclick="pushQuestion(this);">
</form>
Also, after each form is dynamically added, I call:
$('form').on('submit', function (e) {e.preventDefault()});
Now, when I want to reset the forms, I call the following:
$('form').trigger('reset');
When entering this into the console, I get an array back with all the DOM forms. Some forms get reset, but others are unaffected. There are no errors being reported. Does anyone have any thoughts as to why some get reset while others do not?
EDIT Thanks for the help, but the issue has been resolved. See the problem in the comments below
After a few hours of tinkering, it was discovered that the issue was the result of the way the forms were cloned.
I was doing a deep clone of the existing forms which was yielding an odd state of the form which means that when .trigger('reset') was "triggered", it would reset the form to the default state of the clone which may or may not have included some original data yielding a reset that did not appear to be doing anything.
A workaround was to first fire a loop over all the inputs with .attr(value,'') to clear the attribute value after cloning. Then the .trigger('reset') functioned as expected.
I've noticed some inconsistencies with form handling among the various browsers. One gotcha is that the less standards-compliant browsers require an input or button with type=submit for some things to function correctly. I know this is that case at least with submitting a form by pressing the enter key in any text field.
Maybe try adding an <input type='submit'/>?
If user have used small letter in the field then validation is working like
aBCD1234
Not working means form will not submit
ABCD1234
Now user will submit the form.
No need to use JavaScript (and especially not jQuery):
<input type="text" pattern="[A-Z0-9]{8}" />
Adjust the pattern as needed, but this will stop form submission of invalid input, even when JavaScript is disabled. It's also simpler to program.
MDN Doc on HTML pattern attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern
How about:
<input type="text" onkeyup="this.value = this.value.toUpperCase();" />
Add return isValid(); in the onclick event of the submit button:
<input type="button" onclick="return isValid();" />
The isValid function is described well in #janaspage's answer