Syntax error with parseJSON during unobtrusive validation - asp.net-mvc

My MVC app is generating the following HTML which causes a Javascript syntax error upon submission (I'm not typing anything into the two text boxes). Here's the generated HTML and the submit handler:
<form action="/UrIntake/Save" id="UrIntakeForm" method="post">
<input data-val="true" data-val-length="The field LastName must be a string with a maximum length of 50." data-val-length-max="50" data-val-required="The LastName field is required." id="FormSubmitter_LastName" name="FormSubmitter.LastName" type="text" value="" />
<input data-val="true" data-val-length="The field FirstName must be a string with a maximum length of 50." data-val-length-max="50" data-val-required="The FirstName field is required." id="FormSubmitter_FirstName" name="FormSubmitter.FirstName" type="text" value="" />
<div id="SubmissionButtons" class="right">
<input type="button" onclick="SubmitForm()" value="Submit" />
<input type="button" onclick="CancelForm()" value="Cancel" />
</div>
</form>
function SubmitForm() {
$("#UrIntakeForm").valid();
.
.
.
This is the jQuery code where the syntax error is occurring (v1.9.0). "data" is undefined and the "return" line is where the error occurs:
parseJSON: function( data ) {
// Attempt to parse using the native JSON parser first
if ( window.JSON && window.JSON.parse ) {
return window.JSON.parse( data );
}
Presumably, I don't have to enter anything into the text boxes (and should then get the "field is required" message). Is this what's causing the error? That doesn't make sense, but I don't see what else it could be.

Cause
This is an issue with jquery.validate.unobtrusive.js in your ASP.NET.MVC package.
As of jQuery 1.9, the behavior of parseJSON() has changed and an undefined value would be considered a malformed JSON, resulting in the error you've specified. See the jQuery 1.9 Core Upgrade Guide for more information.
Solution
Use the jQuery Migrate plugin, which among other things adds backward-compatibility to the jQuery parseJSON() utility.
EDIT
According to the official announcement in this thread on Microsoft Connect, the issue has been resolved in the latest release of the framework.
Naturally, as Andreas Larsen noted in the comments, make sure to clear any relevant cache, server-side and client-side, after upgrading to the new release.

I also had this issue. The problem was that $.parseJSON(undefined) causes an exception to be thrown, and that the unobtrusive validation was making that call. As stated in the accepted answer, this has since been fixed.
You can download the Microsoft version of this script which will properly validate without causing an exception from this link: http://ajax.aspnetcdn.com/ajax/mvc/5.1/jquery.validate.unobtrusive.min.js

Related

Interpolation not working properly inside mat-form-field for mat-error

I am validating username with custom validation in angular material
Following is my code
<mat-form-field>
<input id="Username" required name="Username" [(ngModel)]="employee.Username" type="text" matInput
#Username="ngModel" (focusout)="ValidateUsername($event.target.value)" placeholder="Username">
<mat-error *ngIf="isNotValidUsername">Username already exist</mat-error>
<mat-error *ngIf="Username.errors?.required && Username.touched">Required</mat-error>
</mat-form-field>
Problem is "Username already exist" error not showing.
If i write this error line code outside mat-form-field then it worked. And also if Required error fired then it also show "Username already exist" error. But it alone inside mat-form-field tag not working. What i am doing wrong? How can i show it?
mat-error won't show errors if the control is valid. You can use the error state matcher to set an invalid state to the input. The following post includes how it is implemented in a password validation form group.
https://stackblitz.com/angular/brleoyyorkap?file=app%2Finput-error-state-matcher-example.ts

JSoup posting login data

I am attempting to use JSoup for parsing HTML, logging into an account and then parsing additional HTML.
There are several tests I have performed on simple HTML, but I picked a website written in JSP that I have an account on, but I am not having any luck attempting to log into the site..
From the HTML, I have the following fields as part of the input:
input id="loginPopup" type="text" size="25" value="" name="/atg/userprofiling/ProfileFormHandler.value.login" maxlength="46"
input type="hidden" value=" " name="_D:/atg/userprofiling/ProfileFormHandler.value.login"
and
input id="passwordPopup" maxlength="25" name="/atg/userprofiling/ProfileFormHandler.value.password" value="" type="password" autocomplete="off" size="25"
input name="_D:/atg/userprofiling/ProfileFormHandler.value.password" value=" " type="hidden"
After retrieving the HTML, I am executing the following:
doc = Jsoup.connect(MAIN_URL)
.data("/atg/userprofiling/ProfileFormHandler.value.login", "xxxxxx#yahoo.com")
.data("/atg/userprofiling/ProfileFormHandler.value.password", "<password>");
.post();
..actually, I have tried several combinations, but am having no success.. I end up getting the "wrong userid/password" screen...
I have also used JSoup to ensure I have the proper name value by:
Element input = doc.getElementById("loginPopup");
String inputName = input.attr("name");
I have been looking for other JSoup examples, and thought maybe someone here might have some insight...
I will be redirected to a secured (HTTPS) page, but I don't think that is the issue. I am assuming it something to do with the strange "name" values of the HTML inputs..?
Thanks
Use a chrome extension called POSTMAN to try simulate the login, Oracle ATG usually needs more fields to login than just Login and Password, open chrome Developer Tools and check the Network while doing a real login to the site, then you will be able to see all the paramenters needed to simulate the login from code.
[]s

ASP.NET MVC Unobtrusive validation not working on IE9

I am working on code written by someone else.
Its a Reset Password form. The current client side validation works on most browsers including IE 10 and IE 11. On IE 9 the Confirm Password does not match error keeps getting displayed even though I am sure I am typing the exact same thing in both fields.
The code:
<div class="form-group">
<div class="input-group input-phone">
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
<input type="password" id="Password" name="Password" class="form-control input-lg default-focus" data-val="true" data-val-required="Password is required." placeholder="Password" autocomplete="off">
</div>
<div class="field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true"></div>
</div>
<div class="form-group form-group-login-bottom">
<div class="input-group input-pin">
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
<input type="password" id="ConfirmPassword" name="ConfirmPassword" class="form-control input-lg" data-val="true" data-val-equalto="Confirm Password does not match." data-val-equalto-other="*.Password" placeholder="Confirm Password" autocomplete="off">
</div>
<div class="field-validation-valid" data-valmsg-for="ConfirmPassword" data-valmsg-replace="true"></div>
</div>
I searched a lot yesterday but none of the solution seems to work.
I tried: updating the jquery.validate.js and jquery.validate.unobtrusive.js files.
I tried debugging, in the jquery.validate.js file, this snippet,
// http://docs.jquery.com/Plugins/Validation/Methods/equalTo
equalTo: function( value, element, param ) {
// bind to the blur event of the target in order to revalidate whenever the target field is updated
// TODO find a way to bind the event just once, avoiding the unbind-rebind overhead
var target = $(param);
if ( this.settings.onfocusout ) {
target.unbind(".validate-equalTo").bind("blur.validate-equalTo", function() {
$(element).valid();
});
}
return value === target.val();
},
target is the input field with id Password. On IE 10 and IE 11, alerting target.val()
returns the correct value of type in. On IE 9 it returns empty. Cannot figure out why it does not work on IE 9 specifically. Any suggestions would be helpful.
What versions of jQuery, jQuery validate and ASP MVC are you using?
I just created a fiddle using your html and including the latest versions of those libraries (jquery 2.1.0, validate 1.13 and validate-unobtrusive from MVC 5). I verified the validation works on IE9 (Mine is version 9.0.8112.16421)
However I have found this issue which means you may find this error in IE9 with incorrect html on your page. You could make sure you don´t have any open tags (like a <p> without its corresponding </p>). For example if in the fiddle you just add a <p> right before the <form> the validation stops working in IE9 but not in Firefox. (See this updated fiddle that doesn´t work on IE9)
In case this doesn´t help, I would check the library versions and any other library that you might be loading in your page that could interfere (If you could replicate your issue in a fiddle that would be great!). If nothing helps, you can try removing the validate-unobtrusive library from the fiddle (it is added on external references) and uncomment the JS code to manually use the validation plugin. At least that would let you find out if the issue is related with jquery.validate or with Microsoft´s jquery.validate-unobtrusive:
//This is commented in the fiddle. Only uncomment to try jquery.validate without jquery.validate-unobtrusive
$(document).ready(function () {
$("#testForm").validate({
debug: false,
rules: {
Password: {
required: true
},
ConfirmPassword: {
required: true,
equalTo: "#Password"
}
},
submitHandler: function (form) {
// just for the fiddle demo
alert('valid form submitted');
return false;
}
});
});

Using Angular to set style to display: none broken in IE 10, works elsewhere

I have the following mvc code:
#Html.DropDownListFor(model => model.State, Model.States, new { #class = "form-control",
// Displays if the country is United States
style="display:{{State_Display()}}",
Name="State"})
#Html.TextBoxFor(model => model.State, new { #class = "form-control",
// Displays if the country is not United States
style="display:{{Province_Display()}}",
Name="Province"})
EDIT: I guess I should mention that Province_Display() is a method in my angular controller that either returns the string "none" or "block" depending on the country chosen.
In the latest versions of Chrome and Firefox, this does what you'd expect: if the user picks united states from a different control, the State field is shown and the Province field hidden.
In IE 10 however, both controls display all the time. Inspecting the elements with f12 in IE, neither of them have any style property at all.
The way I'm thinking of solving this would be to use angular to apply an additional CSS class to the elements instead of using angular to dynamically update the inline style, but my question remains:
Why does this work in Chrome and Firefox but not IE? What's being handled differently? Why doesn't anything appear for Style when I inspect in IE? If you know, will my CSS class idea actually fix the issue (before I bother reworking things)? I'd like to understand the cause so I can avoid similar situations in the future. Thanks!
Additional info:
Right-click, view page source (same in both chrome/IE):
<select Name="State" class="form-control" data-val="true" data-val-required="The State field is required." id="State" name="State" style="display:{{State_Display()}}">
<input Name="Province" class="form-control" id="State" name="State" style="display:{{Province_Display()}}" type="text" value="" />
Inspect (Chrome):
<select name="State" class="form-control" data-val="true" data-val-required="The State field is required." id="State" style="display:block">...omitted...</select>
<input name="Province" class="form-control" id="State" style="display:none" type="text" value="">
Inspect (IE):
<select name="State" class="form-control" id="State" data-val-required="The State field is required." data-val="true">
<input name="Province" class="form-control" id="State" type="text" value=""/>
There's still really not enough of your code to go by, but there are a few approaches you can take. The class thing you recommend should work, but there's something in your code we can't see that's causing it to not execute in IE properly. (any errors in your console?) My best guess... you're missing your DTD, or it's set improperly. Try adding this at the top of your html template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
A better approach (still need to ensure your DTD is set correctly) would be to use ng-show/ng-hide: http://docs.angularjs.org/api/ng.directive:ngHide
<!-- when $scope.myValue is truthy (element is hidden) -->
<div ng-hide="myValue"></div>
<!-- when $scope.myValue is falsy (element is visible) -->
<div ng-hide="myValue" class="ng-hide"></div>
However, if you wish, you can define a css class like so:
.hide {
display:none;
}
and just apply that class to whichever input you wish to hide within you application logic.

Can't get onclick on a button to be accepted

I currently have a link in the below form:
Change
In order to fit the look of the site in which I'm adding this link, I want to change it to a button input, as so:
<input type="button" value="Change" onclick="changeNumbers('Numbers', '#Url.Action("ChangeNumbers")')" />
However, I'm running into a snag with this second form: the single quotes around #Url.Action("ChangeNumbers") are being flagged as Unterminated string constant. Can anyone tell me what I'm doing incorrectly and how to fix it?
EDIT
It didn't occur to me to just try the page - it looks like the second form works. So now my question is - why is Visual Studio flagging this as incorrect?
You're not doing anything "incorrectly" per se, it's just that Razor isn't perfect, and things like quotes within quotes tend to cause it to freak.
One quick fix would be to store the URL in a variable and then use the variable:
#{ var url = Url.Action("ChangeNumbers"); }
<input type="button" value="Change" onclick="changeNumbers('Numbers', '#url')" />
However, an even better fix is to not use the onclick attribute at all. Put this where it belongs: in JS.
<script>
$('#myButton').on('click', function () {
changeNumbers('Numbers', '#Url.Action("ChangeNumbers")');
});
</script>
Used jQuery above, since it's included in MVC by default
I've found that to make Visual Studio happy in this scenario, the easiest thing to do is simply change the <input /> element to a <button></button> element and the error will resolve itself:
<button type="button" onclick="changeNumbers('Numbers', '#Url.Action("ChangeNumbers")')">Change</button>
Otherwise, to continue using an <input /> the markup will need to be changed to the following:
<input type="button" value="Change" onclick="#("changeNumbers('Numbers', '" + Url.Action("ChangeNumbers") + "')")" />

Resources