I have a checkbox, based on value of its ng-model, I'm toggling visibility of a div using ng-show.
This div contains an <input> of type="number". I have a validation on it of min="10000".
I dont want the form to get submitted if the number input is less than 10000.
However, I want this only to happen when the checkbox is checked.
So, I'm using ng-required to check the value of checkbox.
<input type="checkbox" ng-model="isOn"/>
<div ng-show="isOn">
<input type="number" min="10000" ng-model="counter" ng-required="isOn"/>
</div>
If someone proceeds without touching the checkbox and the input field, the form get submitted.
However, if I click the checkbox, enter a number<10000, and the uncheck it again, the form doesn't get submitted.
On the console I get error that it cannot focus on the the input control.
The ng-required fails to work on the min condition. It is being checked regardless of ng-required.
Is there any way I can get this working?
PS: I dont want to use the solution with text input + length limit + restricted char codes on key press so that only numbers could be typed.
you need to reset the model of the number input field to its initial state as well when user unchecks the checkbox.
I used ng-if instead of ng-show and it worked.
I had tried it before I posted the question, but it didnt work. Later I realized I had done the change on a different html file.
I hope this should work
<form name="MyForm" novalidate >
<input type="checkbox" ng-model="MyForm.isOn" required/>
<div ng-show="MyForm.isOn.$touched||MyForm.$submitted">
<span class="errormsg" ng-message="required" ng-show="MyForm.counter.$error.required">Please select the checkbox</span>
</div>
<div ng-show="MyForm.isOn">
<input type="text" ng-model="MyForm.counter" required min="1000" />
<div ng-show="MyForm.counter.$touched||MyForm.$submitted">
<span class="errormsg" ng-message="required" ng-show="MyForm.counter.$error.required">You can't leave this empty</span>
<span class="errormsg" ng-message="required" ng-show="MyForm.counter.$error.min">Value should be atleast 1000</span>
</div>
</div>
</form>
Related
In Firefox, at least, native HTML5 input element validity, e.g. a required text field, shows up as a red border, but only after interaction.
e.g. in the example below, I initially see two input boxes. If I type something in one of them, delete it and press Tab, the first one now glows red to show me it's invalid (because it's required).
Using Javascript, how can I reset the form to the pristine initial state, where the red border is not showing?
<form action='#'>
<div>
<input required name="a" type="text" />
<input required name="b" />
</div>
</form>
The only reliable way I've found is to reset the form, either via a <button type="reset"> or through form.reset().
Note, however, that this will wipe the values of any and all fields in the form, so if you need these to remain you'll need to repopulate their values after the reset is done.
Setting <form novalidate> will work, however subsequently removing the novalidate attribute will make the field(s) show errors again.
I am using a Contact Form 7 form in Wordpress. I have a group of checkboxes, of which I would like to make sure at least one is checked before the form is submitted. Should be simple enough... With the built in validation, because I am not using the CF7 short code, but html input markup, even if the fields are set to required, the form submits. I cannot use the short code because my input field names contain [] brackets. So, I installed Jquery validation plugin for CF7, which works fine to disallow the form to be submitted if none of the boxes are checked, but if you check, say, the first 3 boxes, only the values of the second and third boxes are sent through the form. I have looked around at several custom validation code snippets which look like they would work and I paste them into the same area as I have other similar snippets doing other things and they don't make a difference because the built in CF7 validation doesn't stop the form from submitting when the required fields of my html input fields aren't checked. Any suggestions? I am not a coder (doing my best though) so please feel free to answer like I am a child lol. Here is my html:
<p>
<label>Which Are You Most Interested In?</label>
</br>
<label for="cb1">
<input id="cb1" name="mc4wp-INTERESTS[de9f89w3vq][]"
type="checkbox" value="bf2fd8233f" required> <span>Interest 1</span>
</label>
</br>
<label for="cb2">
<input id="cb2" name="mc4wp-INTERESTS[de9f89w3vq][]"
type="checkbox" value="c1b1b74e7c" required> <span>Interest 2</span>
</label>
</br>
<label for="cb3">
<input id="cb3" name="mc4wp-INTERESTS[de9f89w3vq][]"
type="checkbox" value="a4c5eb6f36" required> <span>Interest 3</span>
</label>
</br>
<label for="cb4">
<input id="cb4" name="mc4wp-INTERESTS[de9f89w3vq][]"
type="checkbox" value="587de639d6" required> <span>Interest 4</span>
</label>
</p>
--
I figured the best way for me to go about this is to just disable the submit button until the group of checkboxes has had at least one value checked (and another set of radio buttons having had one checked) and found this code:
(function($) {
function buttonState(){
$("input").each(function(){
$('#send-info').attr('disabled', 'disabled');
if($(this).val() == "" ) return false;
$('#send-info').attr('disabled', '');
})
}
$(function(){
$('#send-info').attr('disabled', 'disabled');
$('input').change(buttonState);
})
})(jQuery);
... Which works really nicely to disable the submit button, however it seems like since I have hidden fields it does not re-enable the submit button. Also not sure if it cares about required fields only. Wondering how to modify it so that it only cares about required fields and ignores hidden fields. I tried several other snippet solutions and for some reason they were not disabling the submit button. I have the script installed at the bottom of the page via Scripts and Styles Wordpress plugin.
I'm creating an optional part of a form. Once one of the two elements is selected (or text has been entered) the other is required but if there is no input for both these fields are not required. Can I accomplish this with ng-required? If not is there another way? Thanks for the help in advance!
Example Form
You can just do a ng-required with the other model as parameter:
<input ng-model="myFirstInput" />
<input ng-model="mySecondInput"
ng-required="myFirstInput" />
If the first input is filled in, myFirstInput will evaluate to truthy, so the second input will be required.
See this jsfiddle
you can use ng-required directive
<form name="myForm">
Click here to make the input field required:
<input type="checkbox" ng-model="myVar"><br><br>
<input name="myInput" ng-model="myInput" ng-required="myVar">
<h1 ng-if="!myForm.myInput.$valid">The input field cannot be empty</h1>
</form>
I have a checkbox and 2 number input fields:
<input name="exercise[hold]" type="hidden" value="0"><input class="te-cb" id="exercise_hold" name="exercise[hold]" type="checkbox" value="1">
<input class="exerciseReps input-mini" id="exercise_number_of_reps_in_set" min="0" name="exercise[number_of_reps_in_set]" placeholder="Reps" type="number" style="display: none; ">
<div class="input-append te-len" style="display: inline-block; ">
<input class="exerciseLength input-mini" id="exercise_length" min="0" name="exercise[length]" placeholder="Length" type="number">
<span class="add-on">sec</span>
</div>
One input field is hidden with js:
$('.te-len').hide()
In form above there is also text input field with auto competition which gets the data with ajax (that is not relevant here). With jquery I am setting the values of input fields of form with data I got from server.
I also show hidden field if value for checkbox is true:
if data[selected].hold
$('.exerciseReps').hide()
$('.te-len').show()
and that works
Every field is set correctly accept the hidden field, that field is empty.
The weird thing is that I placed alert of that hidden field's value after it has been set and alert shows the value that should have been set but the value is not visible
$('.te-len').val( data[selected].length )
alert $('.te-len').val()
Note: the js code is actually coffescript.
I think the problem is because you are setting value to a div. Although use of val works, this function is primarily used on form elements such as input, select and textarea.
If you mean to replace the content of the div.te-len then you could use either html or text:
$('.te-len').html( data[selected].length )
But it sounds like you are trying to show data[selected].length value in the input.exerciseLength numeric field. For that you should be using:
$('#exercise_length').val( data[selected].length )
I tried the following but it returns two pieces of data to the server. This is a problem for my gateway, and I get an error.
I used this for one of my attempts:
<script type="text/javascript">
if( $('#other).is('):selected') )
{
// user wants to enter own value
$('[name="installments"]").not('[type="text"]').attr('name', '') // remove all
values apart from the entered text.
}
</script>
<body>
<FORM ACTION="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi" METHOD="POST">
<br><br>
<input type="radio" name="installments" id="r1" checked="checked" value="99">
Open-Ended - I can stop them via email at any time.<br>
<label for="installments">number of payments</label><br>
<input type="radio" name="installments" id="other" value="Enter Custom.."><br>
<input type="text" name="installments" value="" maxlength="4" size="4">
<br><br><br>
<input type="submit" name="btnSubmit" value="Submit" />
</form>
This returns either -
installments 99
installments (empty)
or
installments Enter Custom..
installments 5
I can only have one return for the var 'installments' either 99 or the number they imputed.
I have tried various ways of doing this using JS and allowing the user to make a choice with the same results - two instances of the var 'installments' being sent.
Is there a javascript way to test the input field and if a number is entered then disable using id(s) the extra radio button so it can't send any data? Or is there a better way to do this?
Solved
I found the answer & Here it is
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#user_input').change(function() {
$('#use_user_input').val($(this).val());
});
});
</script>
And Html Here:
Total number of payments...</span><br>
<input type="radio" name="installments" checked value="99">
Open-Ended -
<input id="use_user_input" type="radio" name="installments" value="">
limited number of payments -
<input id="user_input" type="text" value="" maxlength="4" size="4"></span>
You would want to give the input text field a different name from the radio inputs, then handle the text field's POST as a separate variable from the radio buttons in the HTTP request. Also, give the second radio input a value, such as "other" so you know to handle the associated text input.
If you only have the ability to receive one field from the form you will need to alter the form as the user fills it in. Currently the form works if the user selects one of the values delimited by the radio buttons. The problem, I gather, is that the status of the radio buttons overrides the value of the text field even if the user selects the "other" option of filling in the text box.
The solution is to use a script that is triggered when the user changes the content of the text box. This script will read the value of the text box and assign that value to the 'other' radio button.
We can do this using the onchange event:
<input id="otherRadio" type="radio" name="installments" value="" /><br />
<input id="otherText" type="text" value="" maxlength="4" size="4" onchange="applyOtherOption()" />
If you try this now, it will cause a javascript error on your page when you change the value of the the text field. This is because the browser fails to find a javascript function with the name applyOtherOption. Let's change that now:
<script type="text/javascript">
function applyOtherOption() {
var textField = document.getElementById("otherText");
var radioField = document.getElementById("otherRadio");
radioField.value = textField.value;
}
</script>
The result is that the "other" radio button's value is always changed to whatever the user enters into the text field and if this radio is selected, this is what is sent with the form.
Important
I've been a bit lazy here and typed out the easiest way to access the content of the form elements. This will work on most (probably all major) browsers but it is not the way it should be done. The proper method is to access the form first, then from the form element access the fields. To do it right you should read this article on setting the value of form elements.
I hope this is useful.