I am trying to disable required message when I checked radio button "No"
However when I submit form nothing happen, it's just redirect to same page and required message is display
Updated code
//hide/show chapela Yes/No
$(document).ready(function () {
$("input[name$='Chapel']").click(function () {
var test = $(this).val();
if (test == 'No') {
$("div#hideChapel").hide();
}
else {
$("div#hideChapel").show();
}
});
});
history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
history.pushState(null, null, document.URL);
});
$(document).ready(function () {
var test = $(this).val();
if(test == 'No'){
$("hideChapel").prop("required", false);
}
else {
$("hideChapel").prop("required", true);
}
});
<div class="form-group">
#Html.LabelFor(model => model.Chapel, htmlAttributes: new { #class = "control-label col-md-3" })
<div class="col-md-9">
<label class="radio-inline">
#Html.RadioButtonFor(model => model.Chapel, "Yes", new {id="Yes", #class = "styled", htmlAttributes = new { #checked = "true"} })
Yes
</label>
<label class="radio-inline">
#Html.RadioButtonFor(model => model.Chapel, "No", new {id="No", #class = "styled", htmlAttributes = new { #checked = "true" } })
No
</label>
#Html.ValidationMessageFor(model => model.Chapel, "", new { #class = "text-danger" })
</div>
</div>
RENDERED HTML
<label class="radio-inline">
<div class="choice" id="uniform-No"><span class="checked"><input checked="checked" class="styled" htmlattributes="{ checked = true }" id="No" name="Chapel" type="radio" value="No" autocomplete="off"></span></div>
No
</label>
<input class="styled" htmlattributes="{ checked = true }" id="Yes" name="Chapel" type="radio" value="Yes" autocomplete="off">
You need to do it on form submit, you're currently setting the required attr on document load and on input click. Achieve like this:
$('form').submit(function(e)
{
e.preventDefault(); //stop form submitting straight away
var radio = $('.my-radio');
if (radio.val() === 'foo') {
//disable require msg e.g. (this is an example - not a copy + paste)
$('form input').each(function()
{
$(this).removeAttr('required')
})
}
$(this).submit()
})
ref:
https://api.jquery.com/removeAttr/
Related
Hello i have an input of type date and i'am doing validation for it.
This input is only required when a checkbox is checked, so i did a function with jquery to add rules required and now i want to remove this rules if my checkbox is not checked.
Here my Html :
<div class="col-md-3 d-inline-block">
<label class="mdc-text-field">
#Html.TextBoxFor(model => model.DateDebutZFU, new { #Value = Model.DateDebutZFU != new DateTime() ? Model.DateDebutZFU.Value.ToString("dd/MM/yyyy") : "", #data_val_date = "La valeur doit être une date", #class = "mdc-text-field__input dataDate" })
<span class="mdc-floating-label">Date Debut ZFU</span>
<div class="mdc-text-field__bottom-line"></div>
</label>
#Html.ValidationMessageFor(model => model.DateDebutZFU, "", new { #class = "text-danger" })
</div>
<div class="mdc-switch align-top mt-1 mr-5">
<div class="mdc-switch__track"></div>
<div class="mdc-switch__thumb-underlay">
<div class="mdc-switch__thumb">
#Html.CheckBoxFor(m => m.ZFU, new { #class = "mdc-switch__native-control", #role = "switch" })
</div>
</div>
</div>
And Here the function to add rules if i click to the button submit :
function btnclicked() {
if ($("#btnedit").data('clicked', true)) {
if (($("#ZFU").is(':checked'))) {
$("#DateDebutZFU").rules("add", {
required: true,
messages: {
required: "Date Debut ZFU est obligatoire"
}
});
}
}
}
And here what i try to do if the checkbox is not checked then i must remove rules of required that was displayed in the input:
$(document).ready(function () {
$("#ZFU").click(function () {
var rules = $("#DateDebutZFU").rules();
if (rules) {
$("#DateDebutZFU").rules("remove", "required");
}
});
});
Now my problem that the message required is always displayed despite that the checkbox is not checked so what is the problem in my code ?
If you need to evaluate your date input based on checkbox - just do it
function btnclicked() {
if ($("#btnedit").data('clicked', true)) {
var isChecked = $("#ZFU").is(':checked');
var $dateDeutZFU = $("#DateDebutZFU");
if (isChecked) {
$dateDeutZFU.rules("add", {
required: true,
messages: {
required: "Date Debut ZFU est obligatoire"
}
});
}else{
$dateDeutZFU.rules("remove", "required");
}
}
}
Using your example I am checking if checkbox.is(':checked') and based on this condition add/remove 'required' rule. ope this will help you.
I have a radio button which has option to show or hide div content defending of radiobutton state, but after i fill the form and I press F5 the previous state stay, but div class is dissapear.
$(document).ready(function () {
$("input[name$='Chapel']").click(function () {
var test = $(this).val();
if (test == 'No') {
$("div#hideChapel").hide();
}
else {
$("div#hideChapel").show();
}
});
});
HTML
<div class="form-group">
#Html.LabelFor(model => model.Chapel, htmlAttributes: new { #class = "control-label col-md-3" })
<div class="col-md-9">
<label class="radio-inline">
#Html.RadioButtonFor(model => model.Chapel, "Yes", new { #class = "styled", htmlAttributes = new { #checked = "true", #name = "Chapel"} }) Yes
</label>
<label class="radio-inline">
#Html.RadioButtonFor(model => model.Chapel, "No", new { #class = "styled", htmlAttributes = new { #checked = "true" , #name = "Chapel" } })
No
</label>
#Html.ValidationMessageFor(model => model.Chapel, "", new { #class = "text-danger" })
</div>
</div>
Any comment, where It should be problem ?
After page refresh if you want to show a div then you need to add that code outside click function.
$(document).ready(function () {
// Add logic when to show this div
$("div#hideChapel").show(); // Here you go
$("input[name$='Chapel']").click(function () {
var test = $(this).val();
if (test == 'No') {
$("div#hideChapel").hide();
}
else {
$("div#hideChapel").show();
}
});
});
I am totally noob for javascript, I just started to learn and I stuck.
I am working on ASP.NET app and in my view I create JavaScript function that need to check If checkbox is checked and It need to redirect to next View either if option is Yes or No.
For option Yes work perfectlly, but when I select "No" it display required message and in console I get error
Uncaught TypeError: Cannot read property 'checked' of null
at YesNoChecked (CreateManually:940)
at HTMLButtonElement.onclick (CreateManually:886)
So my code so far
function YesNoChecked() {
var Yes = document.getElementById('Yes');
var No = document.getElementById('No');
if (document.getElementById('Yes').checked ==true) {
console.log('Successfull');
}
if (document.getElementById('No').checked==false) {
console.log('Error');
}
}
HTML
<div class="form-group">
#Html.LabelFor(model => model.Chapel, htmlAttributes: new { #class = "control-label col-md-3" })
<div class="col-md-9">
<label class="radio-inline">
#Html.RadioButtonFor(model => model.Chapel, "Yes", new { #class = "styled", htmlAttributes = new { #checked = "true" } })
Yes
</label>
<label class="radio-inline">
#Html.RadioButtonFor(model => model.Chapel, "No", new { #class = "styled", htmlAttributes = new { #checked = "true" } })
No
</label>
#Html.ValidationMessageFor(model => model.Chapel, "", new { #class = "text-danger" })
</div>
</div>
So basically, either choice is selected "No" or "Yes" it need to redirect to next View, but when choice is selected to "No" it need to hidden element called Chapel.
Please help guys :/
If you need some more code let me know, I will publish
UPDATE
Button click
<button type="submit" onclick="YesNoChecked()" class="btn btn-success"><i class="icon icon-check position-left"></i> Proceed to Payment</button>
Radiobutton Yes HTML
<input class="styled" htmlattributes="{ checked = true }" id="Chapel" name="Chapel" type="radio" value="Yes" autocomplete="off">
Radiobutton No HTML
<input checked="checked" class="styled" htmlattributes="{ checked = true }" id="Chapel" name="Chapel" type="radio" value="No" autocomplete="off">
Your code to generate a check box is wrong. At least in asp.net core you should receive the error "No overload for method 'CheckBoxFor' takes 3 arguments"
If Chapel in your model is a bool property, this creates a checkbox for it:
#Html.CheckBoxFor(m => m.Chapel, new { id="Yes", #class = "styled", htmlAttributes = new { #checked = "true" } })
If you want radio buttons:
#Html.RadioButtonFor(model => model.Chapel, true, new { id = "Yes", #class = "styled" }) Yes <br/>
#Html.RadioButtonFor(model => model.Chapel, false, new { id = "No", #class = "styled" }) No
This will properly create two html elements for you with the Ids Yes and No and will let your js work:
function YesNoChecked() {
var Yes = document.getElementById('Yes');
var No = document.getElementById('No');
if (Yes.checked ==true) {
console.log('Successfull');
}
if (No.checked==false) {
console.log('Error');
}
}
I'm using this jQuery from CodePen https://codepen.io/dicson/pen/eJzoEX & it's working great however it is somehow blocking the FormMethod.Post action from firing. I'm not very experienced with JS / JQuery so hoping someone can help.
FORM
#using (Html.BeginForm("Login", "Authentication", FormMethod.Post, new { role = "form" }))
{
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<form class="form">
<div class="f_row">
<label>Username</label>
#Html.TextBoxFor(m => m.Email, new { #name = "username", #type = "username", #class = "input-field", #required = "" })
#Html.ValidationMessageFor(m => m.Email, "", new { #class = "text-danger" })
<u></u>
</div>
<div class="f_row last">
<label>Password</label>
#Html.PasswordFor(m => m.Password, new { #name = "pass", #type = "password", #class = "input-field", #required = "" })
#Html.ValidationMessageFor(m => m.Password, "", new { #class = "text-danger" })
<u></u>
</div>
<div class="form-group">
<input type="submit" value="GO" class="btn btn-default submit-btn input-field" />
</div>
</form>
}
JQUERY
var inP = $('.input-field');
inP.on('blur', function () {
if (!this.value) {
$(this).parent('.f_row').removeClass('focus');
} else {
$(this).parent('.f_row').addClass('focus');
}
}).on('focus', function () {
$(this).parent('.f_row').addClass('focus');
$('.btn').removeClass('active');
$('.f_row').removeClass('shake');
});
$('.resetTag').click(function(e){
e.preventDefault();
$('.formBox').addClass('level-forget').removeClass('level-reg');
});
$('.back').click(function(e){
e.preventDefault();
$('.formBox').removeClass('level-forget').addClass('level-login');
});
$('.regTag').click(function(e){
e.preventDefault();
$('.formBox').removeClass('level-reg-revers');
$('.formBox').toggleClass('level-login').toggleClass('level-reg');
if(!$('.formBox').hasClass('level-reg')) {
$('.formBox').addClass('level-reg-revers');
}
});
$('.btn').each(function() {
$(this).on('click', function (e) {
e.preventDefault();
var finp = $(this).parent('form').find('input');
console.log(finp.html());
if (!finp.val() == 0) {
$(this).addClass('active');
}
setTimeout(function () {
inP.val('');
$('.f_row').removeClass('shake focus');
$('.btn').removeClass('active');
}, 2000);
if (inP.val() == 0) {
inP.parent('.f_row').addClass('shake');
}
//inP.val('');
//$('.f_row').removeClass('focus');
});
});
If I dont load the jquery the form works fine.
I get an undefined log on the console when running the jquery
I'm trying to alter the value of a drop down list whenever the partial view is called. At the moment the AJAX call retrieves the information i need, but the user has to alter the location value in the partial view before saving, basically i want the value of location to be changed during the ajax call, thus saving the user time on altering the value by hand, i've attempted it but clearly doesn't work (see the code below), any ideas on where im going wrong?
_CameraInfo.cshtml (partial view)
#model JobTracker.Models.Job
<h2>Edit and Confirm</h2>
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
<fieldset>
<legend>Job</legend>
#Html.HiddenFor(model => model.JobID)
#Html.HiddenFor(model => model.OrderID)
<div class="editor-label">
#Html.LabelFor(model => model.LocationID, "Location")
</div>
<div class="editor-field">
#Html.DropDownList("LocationID", null, new {id ="Location" })
#Html.ValidationMessageFor(model => model.LocationID)
</div><br />
<div class="editor-label">
#Html.LabelFor(model => model.HighPriority)
</div>
<div class="editor-field">
#Html.DropDownListFor(model => model.HighPriority, new SelectList(
new[]
{
new { Value = "Yes", Text = "Yes" },
new { Value = "No", Text = "No" },
},
"Value",
"Text",
Model
))
#Html.ValidationMessageFor(model => model.HighPriority)
</div><br />
<div class="editor-label">
#Html.LabelFor(model => model.Comments)
</div>
<div class="editor-field">
#Html.TextAreaFor(model => model.Comments)
#Html.ValidationMessageFor(model => model.Comments)
</div><br />
<div class="editor-label">
#Html.LabelFor(model => model.Status)
</div>
<div class="editor-field">
#Html.DropDownListFor(model => model.Status, new SelectList(
new[]
{
new { Value = "In Progress", Text = "In Progress" },
new { Value = "Completed", Text = "Completed" },
new { Value = "Not Started", Text = "Not Started" },
new { Value = "Stopped", Text = "Stopped" },
},
"Value",
"Text",
Model
))
#Html.ValidationMessageFor(model => model.Status)
</div><br />
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
}
AJAX call
$(document).ready(function () {
$('#qr-number').on('change', function () {
var ddl = $('#Location');
var value = "cleanroom";
$.ajax({
type: "Get",
url: '/CameraInfo/Edit',
data: { ID: $('#qr-number').val() },
success: function (response) {
ddl.append(value);
$('#Sample').html(response);
},
error: function (response) {
if (response.responseText != "") {
alert(response.responseText);
alert("Some thing wrong..");
}
}
});
});
});
});
The DDL is populated by the model data by the way.
Please let me know if you require any further information :)
for ddl value
ddl.val(value);
for ddl text
ddl.text(value);
use .val() or .text() not .append()