Develop Reference

Input from Model not included in form POST data

I have a simple HTML POST form with a model contained within like so:
https://jsfiddle.net/pilotman/rn9gspz8/6/
note: the JS fiddle is basic and just for demo and is not perfect.
So when I submit the form and let the input inside the model has some text, my server script does not see 'input2'
$_POST['input2'];
Does the data inside the model get sent with the POST data from the form?
If not can it be done (I assume anything inside the form tag would be sent but I am clearly wrong)?
Thanks

Your code is correct. as per your jsfiddle
$_POST['input1']; is the normal input
$_POST['input2']; is the popup model input field;

Angular Form validator only works when typing in text box

I am developing a small app in angular5 with PHP. I have an issue in validating form. Form validator works fine when I input data by typing in keyboard. But it is not working when I fill data with javascript.
For example
In email field,
If I type myemail , Its showing invalid email. works good.
But If I set using javascript like $('#email').value('asdsa#gmail.com') its not working.
What is wrong? I am new to Angular5.

try to use below code for setting up the value in the form control. pleas refer angular doc for more information https://angular.io/guide/form-validation
https://angular.io/guide/reactive-forms
https://angular.io/api/forms/FormControl
this.registerForm.controls.email.setValue('asdsa#gmail.com');

You can just say see this link
this.registerForm.patchValue({
email: 'asdsa#gmail.com'
});
or you can assign it initially while creating a form like,
this.registerForm = this.fb.group({
email: ['asdsa#gmail.com']
})

If I remember correctly, angular does not know when jQuery affects the Physical DOM(therefore not knowing when to run its check on variables to cause a change). In order to do this, you have to initiate a change cycle to angular after your jquery action.

JQuery fill the form but failed to be recognized

I am using Flask as the backend. And I wrote a simple form with WTForm, say,
field = StringField('input:', validators=[Required()])
And I write a JQuery to fill it automatically
$('#theidofthefield').val('fillingin');
And I click the submit button in the form but it shows that the field is empty. And I check the request.form.field.data is also empty.
Hope to get a solution.

I have no idea about WTForm but you can check if your field element has got the name attribute, which is required to send back to the backend code.
Your field has to be something like this:
<input type="text" name="thenameofthefield" id="theidofthefield" />
//-----------------^^^^^^^^^^^^^^^^^^^^^^^---name attribute is required.

Another way to fill value is:
$('#theidofthefield').attr('value','filling');
Lets see if it works..
In case variable field is pointer to the object then..
$(field).val('dfsdf') or $(field).attr('value','filling') may work.

AngularJs - Make form valid manually

I have form with multiple textboxes. If user leaves a field blank he will be shown a checkbox under the form, if the user selects the checkbox then form can be submitted inspite of fields empty.
So for checkbox click, i have to make the form valid manually.
I tried doing form.$valid = true; but doesn't give me proper results.
Have any idea How to make form valid manually.

Angular provides this functionality to you via method on the form object that gets created.
$valid is a boolean, meant to be used as a read-only value.
If you would like to force the form to be valid, use $setValidity
from the documentation:
Change the validity state, and notifies the form when the control changes validity. (i.e. it does not notify form if given validator is already marked as invalid).
This method should be called by validators - i.e. the parser or formatter functions

Disable required validation by JavaScript

I have a create form to create an object.
The create model has some properties that are only visible (.hide, .show()) if a checkbox is checked and that are marked required (by Attribute in Model).
Unfortunatly when the checkbox is not checked, the required validation is performed on the properties hidden.
How can I disable the required validation for this properties?
I tried setting the data-val property of the input element to false but this does not work.
Some an idea?
Thanks in advance
Tobias
UPDATE:
Here is the java script code. The data-val property is set correctly to false. it seems that validation does not care of this property. there is also the data-val-required attribute but there is a text i could not backup.
$(function () {
$("#MyCheckbox")
.change(function () {
if (this.checked) {
$("#divWithChildProperties [data-val]").attr("data-val", true);
$("#divWithChildProperties ").show();
}
else {
$("#divWithChildProperties [data-val]").attr("data-val", false);
$("#divWithChildProperties ").hide();
}
})
});

I've handled cases like this with a custom Validation Attribute. Instead of using the Required attribute for properties you could make a RequiredIf attribute and make some of your properties required only if another property is a certain value.
Here is a post about creating an attribute like this (the example in the middle of the page under the 'A more complex custom validator' section): http://www.devtrends.co.uk/blog/the-complete-guide-to-validation-in-asp.net-mvc-3-part-2
If your checkbox represents a property in your model this should work fine.
If you don't want to handle this with a new validation attribute you will have to do a few more things than just change the data-val attribute to false. When jQuery validate first parses your form it stores values in the form's data. So simply changing data-val isn't enough. You will additionally have to remove the stored validation data and reparse the form. Here's an example:
// Do this after you've removed/modified the data-val attribute
$('selector for your form').removeData('unobtrusiveValidation');
$('selector for your form').removeData('validator');
$.validator.unobtrusive.parse('selector for your form');

You can use following JQuery to remove all validation rules of your element
$('#ElementId').rules('remove');
Same way you can use class name like,
$('.ElementClassName').rules('remove');
If you want to remove specific rule, do like this
$('#ElementId').rules('remove', 'required');

The unobtrusive javascript plugin provided by MVC doesn't process the data properties on the fly. Instead, it parses the results on document ready and caches them.
Try calling $.validator.unobtrusive.parse(myForm) on your form after modifying the property in question to see if it gives you expected results.

Unobstrusive validation looks for this attribute data-val="true"
I guess, that if you do a $('#mycheckbox').data('val','false'), the validation will skip a item with that id.
Probably there is a more appropriate way to do it, but if not, take this.
cheers.

There are many ways to disable unobtrusive validation in Javascript but most of them seems a bit hackish...
Recently found that you can do it with submit button. Check this link for info
http://www.nitrix-reloaded.com/2013/09/16/disable-client-side-validation-on-a-button-click-asp-net-mvc/
//this
<script type="text/javascript">
document.getElementById("backButton").disableValidation = true;
</script>
//or this
<input type="submit" name="backButton" value="Back"
title="Go back to Prev Step" disableValidation="true" />
//or this
<input type="submit" name="backButton" value="Back"
title="Go back to Prev Step" class="mybtn-style cancel" />
Another way that is more flexible but more complicated : you can disable unobtrusive validation by setting the data-val attribute to false. But there is a trick...
Unobtrusive validation data is cached when the document is ready. This means that if you have data-val='true' at the beginning and that you change it later on, it will still be true.
So, if you want to change it after the document is ready, you also need to reset the validator which will erase the cached data. Here is how to do it :
disableValidation: function () {
//Set the attribute to false
$("[data-val='true']").attr('data-val', 'false');
//Reset validation message
$('.field-validation-error')
.removeClass('field-validation-error')
.addClass('field-validation-valid');
//Reset input, select and textarea style
$('.input-validation-error')
.removeClass('input-validation-error')
.addClass('valid');
//Reset validation summary
$(".validation-summary-errors")
.removeClass("validation-summary-errors")
.addClass("validation-summary-valid");
//To reenable lazy validation (no validation until you submit the form)
$('form').removeData('unobtrusiveValidation');
$('form').removeData('validator');
$.validator.unobtrusive.parse($('form'));
},
You don't need to reset all the messages, input styles and validation summary to be able to submit the form but it's useful if you want to change the validation after the page is loaded. Otherwise, even if you change the validation, the previous error messages will still be visible...

The default DataAnnotationsModelValidatorProvider adds a Required attribute to all value types. You can change this behavior by adding the code in this answer.

You could implement a custom validator like "RequiredIf".
That will keep your model design quite obvious (unlike client-side-only solutions proposed). This allows you to keep the validation logic separate from display logic (that's what MVC is all about).
See this answer : RequiredIf Conditional Validation Attribute
and ultimately that blog post : Conditional Validation in ASP.NET MVC 3
cheers!