We Keep Coding

Jquery validate custom css checkbox

Is there a way to validate the following checkbox ?
<form name="rmn-form" id="rmn-form" action="send.php" enctype="multipart/form-data" method="POST">
<div class="row">
<div class="col-md-12 col-xs-12">
<div class="rmn-input-field">
<label for="gdpr" class="checkbox-container"> Accept terms and conditions
<input type="checkbox" checked="checked" id="gdpr" name="gdpr">
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
<button type="submit" name="submit" id="submit-all" class="waves-effect waves-light btn submit-button pink mt-30">Send</button>
</form>
The checkbox is generated by https://www.w3schools.com/howto/howto_css_custom_checkbox.asp
I have the following JSFiddle with my code with the bootstrap library and jquery.validate.min.js:
http://jsfiddle.net/2837qdeu/

Just change your input tag to the code below
<input type="checkbox" required="required" id="gdpr" name="gdpr">
It will check before submit that this checkbox must be checked.
Fiddle

You also can take control of this yourself, as below:
$("[name=submit]").click(function(){
if ( $('#gdpr').is(':checked') ){
alert('submit will proceed - checkbox is checked') //This alert not required, only added for demo
}else{
alert('Error - submit will not proceed');
return false; //<== Here is the magic, along with checking that the box is checked
}
});
Revised jsFiddle
return false will stop the submit procedure, allowing you to display a message, or do some js wizardry, before returning control to the user.

I added the following line in the js file and it worked just fine:
$("#rmn-form").validate({
ignore: ':hidden:not(:checkbox)',
....
});

Angularjs radio button validation inside form is not working

Hi I am developing web application. I have 4 radio button. I am trying to validate radio buttons. By default none of the radio box should be checked. On clicking on submit if none of the radio button is not checked then i want to display error message.
<form name="payment" novalidate>
<fieldset ng-disabled="paymentform">
<div class="upload-button-container">
<div class="upload-button bank button1">
<div class="upload-button-icon">
<label for="visa" class="visa">
<img src="images/visa.png">
<input type="radio" id="visa" name="selector" ng-model="card">
<span class="selector-visa"></span>
</label>
</div>
</div>
<div class="upload-button bank button2">
<div class="upload-button-icon">
<label for="americanexpress" class="americanexpress">
<img src="images/americanexpress.png">
<input type="radio" id="americanexpress" name="selector" ng-model="card">
<span class="selector-americanexpress"></span>
</label>
</div>
</div>
</div>
<div class="button-container margin-top80">
<input type="submit" value="{{ 'BACK' | translate }}" class="brown-button">
<input type="submit" value="{{ 'NEXT' | translate }}" class="blue-button" ng-click="makepayment()">
</div>
</fieldset>
</form>
I want to validate here in javascript file.
$scope.makepayment = function () {
if($scope.card!=null)
{
}else
{
toastr.error($filter('translate')('Error Occured', ''));
}
}
Above code always returns null. May I know what i am missing in the above code? Any help would be appreciated. Thank you.

There should be a value attribute in radio input tag.
The value to which the ngModel expression should be set when selected. Note that value only supports string values, i.e. the scope model needs to be a string, too. Use ngValue if you need complex models (number, object, ...).

Checked Another hidden radio Button

hello,
I'm trying to select hidden radio input when selecting another one
<div class="questions">
<div class="questions_title">
<span> Q : What Are you doing now ?</span>
</div>
<div class="answers">
<script>
$('#answerid_').on('checked', function() {
$('#degres_').prop('checked', true);
return false;
});
</script>
<div class="field">
<input type="radio" value="1915" id="answerid_1" name="answerid_1" class="required">
<input type="hidden" value="0" id="degres_1" name="degres_1">
<span class="questions_label">Working. </span>
</div>
<div class="field">
<input type="radio" value="1916" id="answerid_2" name="answerid_1">
<input type="hidden" value="1" id="degres_2" name="degres_1">
<span class="questions_label">Playing.</span>
</div>
<div class="field">
<input type="radio" value="1917" id="answerid_3" name="answerid_1">
<input type="hidden" value="2" id="degres_3" name="degres_1">
<span class="questions_label">not Sleeping </span>
</div>
<div class="field">
<input type="radio" value="1918" id="answerid_4" name="answerid_1">
<input type="hidden" value="3" id="degres_4" name="degres_1">
<span class="questions_label">Nothing.</span>
</div>
</div>
I need => When selecting any answer the according next hidden degree would be checked too

You can't check a hidden-type input. However, you can check a radio-type invisible input (with display:none style).

it should be..
$('[id^=answerid_]').on('change', function() {
$(this).next().prop('checked', true);
return false;
});

You need wild card to attach event and change event.
Live Demo
$('[id^=answerid_]').on('change', function() {
$(this).next(':hidden').prop('checked', true);
return false;
});
Instead of using check of hidden I would suggest you to set the value of hidden field.
$(this).next(':hidden').val("true");

you can try this
JS CODE
$('[id^=answerid_]').on('change', function() {
$(this).siblings('[id^=degres_]').prop('checked', true);
alert($(this).siblings('[id^=degres_]').prop('checked'));
return false;
});
DEMO

You can't check a hidden-type input. it is expecting a value, so the value could be 1 if previous is cecked or 0 if not checked.

after use the folowing code
$('[id^=answerid_]').on('change', function() { $(this).siblings('[id^=degres_]').prop('checked', true); //alert($(this).siblings('[id^=degres_]').prop('checked')); return false; });
and changing hidden input to another radio because it now work and by adding
style="margin-left: -16px; position: absolute;"
for every answer input to be above degrees radio it work successfully.
but in the last question it's not work or check degree input :(

Disabling submit button until all fields have values on multi-part form

I have created a multi-part form and need to validate completed fields in visible fieldsets on the form. If all required fields are completed, the the next step button will be enabled.
So Far I have played with a few options none of which are 100% effective
HTML:
<div id="set1">
<fieldset>
<div>
<label>field 1</label>
<input name="f1" type="text" /><br />
<span class="error"></span>
</div>
<div>
<label>field 2</label>
<input name="f2" type="text" /><br />
</div>
</fieldset>
</div>
<div id="set2">
<fieldset>
<div>
<label>field 3</label>
<input name="f3" type="text" /><br />
<span class="error"></span>
</div>
.
.
.
</fieldset>
</div>
jQuery:
$input = $('fieldset:visible div:has(span[class="error"]) input');
$next = $('fieldset:visible .button');
$input.keyup(function() {
$input.each(function() {
var trigger = false;
$input.each(function() {
if (!$(this).val()) {
trigger = true;
}
});
trigger ? $next.attr('class', 'disable') : $next.removeAttr('class');
});
});
Could someone help me understand what I am doing wrong? It appears the keyup event is not firing.

You should use jQuery validator. It will make your life a lot easier:
jQuery Validation

First thing, the keyup event will be fired, don't worry. Second thing, there is a heavy error at line if (!$(this).val()) { This spelling caused by wrong thinking in standard javascript. Translated to it you wanted to test if the value exists or not. The truth is, the value does always exists. It is just "" or a real value.
Look at my example. After some corrections it works as you wanted, hopefully.

jQuery generated text on click upon if statement, remains after if is false

I've got a form with some radio buttons in it. When a link is clicked, the value of the selected radio button is passed to a text field. If the value is '0', the text 'Not required' is given to a div, overwriting where the output would have been if it wasn't '0'.
When you click the '0' radio button then click the link, it works as it should. The problem is that if you change to a different radio button then click the link again, the text remains. What I want to happen is for that message to only appear when the '0' is selected and for it to be removed if a non-'0' is chosen.
I've set it up on http://jsfiddle.net/thewebdes/gnW2c/ so you can see what I mean. In the actual project, the 'Not required' text will overwrite anything else that would have appeared so clearing the html using jquery at the beginning of the click function is a no-go.
HTML
<form action="#" method="post">
<label for="item1_qty1">0</label>
<input type="radio" id="item1_qty1" name="item1_qty" value="0">
<br>
<label for="item1_qty1">100</label>
<input type="radio" id="item1_qty1" name="item1_qty" value="100">
<br>
<label for="item1_qty1">250</label>
<input type="radio" id="item1_qty1" name="item1_qty" value="250">
<br>
<label for="item1_qty1">500</label>
<input type="radio" id="item1_qty1" name="item1_qty" value="500">
Get Value
<div class="output">
<label for="item1_qty_output">Item 1 Output</label>
<input type="text" id="item1_qty_output">
</div>
</form>
JS
$('.gen_output').click(function() {
$('#item1_qty_output').val($('input:radio:checked').val());
if ($('input:radio:checked').val() == '0') {
$('.output').html('Not required')
}
});

I think this is what you want - http://jsfiddle.net/ntTcr/
You were replacing the entire content of the output div when the value was 0 so you could not get it back when you selected a different value.

You were replacing all the content with .html, so your inputs werent there when you tried to update them.
http://jsfiddle.net/loktar/gnW2c/6/
JS
$('.gen_output').click(function() {
$('#item1_qty_output').val($('input:radio:checked').val());
if ($('input:radio:checked').val() == '0') {
$('#msg').html('Not required').show();
$('#fields').hide();
}else{
$('#fields').show();
$('#msg').hide();
}
});
Markup
<form action="#" method="post">
<label for="item1_qty1">0</label>
<input type="radio" id="item1_qty1" name="item1_qty" value="0">
<br>
<label for="item1_qty1">100</label>
<input type="radio" id="item1_qty1" name="item1_qty" value="100">
<br>
<label for="item1_qty1">250</label>
<input type="radio" id="item1_qty1" name="item1_qty" value="250">
<br>
<label for="item1_qty1">500</label>
<input type="radio" id="item1_qty1" name="item1_qty" value="500">
Get Value
<div class="output">
<div id="msg"></div>
<div id="fields">
<label for="item1_qty_output">Item 1 Output</label>
<input type="text" id="item1_qty_output">
</div>
</div>
</form>
Just added each one in the output container div, then do a hide/show.

You need to set it back if it's not 0, like this:
$('.gen_output').click(function() {
$('#item1_qty_output').val($('input:radio:checked').val());
if ($('input:radio:checked').val() == '0') {
$('.output').html('Not required');
}
else {
$('.output').html("<label for='item1_qty_output'>Item 1 Output</label><input type='text' id='item1_qty_output'");
}
});

I'd suggested adding a second div for "not required" and change the click function to show/hide the two divs.
<div class="output">
<label for="item1_qty_output">Item 1 Output</label>
<input type="text" id="item1_qty_output">
</div>
<div id="notRequired" style="display:none">
Not required
</div>
$('.gen_output').click(function() {
$('#item1_qty_output').val($('input:radio:checked').val());
if ($('input:radio:checked').val() == '0') {
$("#notRequired").show();
$(".output").hide();
}
else {
$("#notRequired").hide();
$(".output").show();
}
});