I have the following form:
<%# taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%# page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<% session.invalidate(); %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Hi</title>
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" type="text/css" href="/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="/css/foundation.min.css" />
<link rel="stylesheet" type="text/css" href="/css/login.css">
<script type="text/javascript" src="/js/custom.modernizr.js"></script>
</head>
<body>
<div class="row" style="height: 150px;"> </div>
<div class="row">
<div class="radius panel large-6 small-6 columns small-centered large-centered">
<div><h2>Hi</h2></div>
<div id="loginMessage" class="loginError">${loginMessage}</div>
<form:form commandName="loginForm" id="loginForm" name="loginForm" method="post" action="/do/authenticate" class="custom">
<form:label path="email">Email:</form:label>
<form:input path="email"/>
<form:label path="password">Password:</form:label>
<form:input path="password" type="password"/>
</form:form>
<div class="row">
<div class="large-offset-6 small-offset-6 large-6 small-6 columns" style="text-align: right;">
<button class="tiny button">Register</button>
<button class="tiny button">Reset</button>
<button class="small success button" style="margin-left: 5px;" onclick="document.forms[0].submit();">Login</button>
</div>
</div>
</div>
</div>
<div id="IE8Modal" class="reveal-modal">
<h2>We're Sorry</h2>
<p class="lead">This site does not support older versions of Internet Explorer</p>
<p>We recommend you upgrade to a modern browser, such as Firefox</p>
<a class="close-reveal-modal">×</a>
</div>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script type="text/javascript" src="/js/foundation.min.js"></script>
<script type="text/javascript" src="/js/login.js"></script>
<script>
var isIE8 = false;
if (document.all && document.querySelector && !document.addEventListener) {
isIE8 = true;
}
if (isIE8) {
$('#IE8Modal').foundation('reveal', 'open');
}
</script>
Note that when this jsp is compiled, those
<form id="loginForm" name="loginForm" class="custom" action="/do/authenticate" method="post">
<label for="email">Email:</label>
<input id="email" name="email" type="text" value=""/>
<label for="password">Password:</label>
<input id="password" name="password" type="password" value=""/>
</form>
And the following /js/login.js :
$(document).ready(function () {
$(document).foundation();
$("#loginForm").validate({
rules: {
email: { required: true, minlength: 6, maxlength: 40 },
password: { required: true, minlength: 8, maxlength: 40 }
},
messages: {
email: { required: "Please enter an email address", minlength: "Email address must be at least 6 characters long" },
password: { required: "Please enter a password", minlength: "Password must be at least 8 characters long" }
}
});
});
And it's not validating. It submits, with no messages in the console.
There is no such thing as jQuery .exists(), unless you have a plugin or a function that defines it. There is no need to test for an element's existence with jQuery since it does it automatically.
$(document).ready(function() {
// if ($("#loginForm").exists()) { // <-- remove this invalid method
$("#loginForm").validate({
// ...
Since your button is outside of your form, use a click handler to trigger the submit.
$('#login').click(function() {
$("#loginForm").submit();
});
HTML:
<button id="login" class="small success button" style="margin-left: 5px;">Login</button>
DEMO: http://jsfiddle.net/fJnpX/1/
Related
I am trying to make a login application using spring boot. I tried securing the page using Spring Security using Thymeleaf. I created a sample login page which appears like this.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<title>Spring Security Example</title>
</head>
<body>
<div th:if="${param.error}">
Invalid username and password.
</div>
<div th:if="${param.logout}">
You have been logged out.
</div>
<form th:action="#{/login}" method="post">
<div><label> User Name : <input type="text" name="username"/> </label></div>
<div><label> Password: <input type="password" name="password"/> </label></div>
<div><input type="submit" value="Sign In"/></div>
</form>
</body>
</html>
This Code worked fine and I was able to move to the login page. But when I created a new login page using HTML5 and tried running the code, it displayed an error like this
org.xml.sax.SAXParseException: The element type "link" must be terminated by the matching end-tag "</link>".
at com.sun.org.apache.xerces.internal.util.ErrorHandlerWrapper.createSAXParseException(Unknown Source) [na:1.8.0_101]
at com.sun.org.apache.xerces.internal.util.ErrorHandlerWrapper.fatalError(Unknown Source) [na:1.8.0_101]
at com.sun.org.apache.xerces.internal.impl.XMLErrorReporter.reportError(Unknown Source) [na:1.8.0_101]
at com.sun.org.apache.xerces.internal.impl.XMLErrorReporter.reportError(Unknown Source) [na:1.8.0_101]
at com.sun.org.apache.xerces.internal.impl.XMLScanner.reportFatalError(Unknown Source) [na:1.8.0_101]
at com.sun.org.apache.xerces.internal.impl.XMLDocumentFragmentScannerImpl.scanEndElement(Unknown Source) [na:1.8.0_101]
at com.sun.org.apache.xerces.internal.impl.XMLDocumentFragmentScannerImpl$FragmentContentDriver.next(Unknown Source) [na:1.8.0_101]
at com.sun.org.apache.xerces.internal.impl.XMLDocumentScannerImpl.next(Unknown Source) [na:1.8.0_101]
at com.sun.org.apache.xerces.internal.impl.XMLDocumentFragmentScannerImpl.scanDocument(Unknown Source) [na:1.8.0_101]
at com.sun.org.apache.xerces.internal.parsers.XML11Configuration.parse(Unknown Source) [na:1.8.0_101]
at com.sun.org.apache.xerces.internal.parsers.XML11Configuration.parse(Unknown Source) [na:1.8.0_101]
at com.sun.org.apache.xerces.internal.parsers.XMLParser.parse(Unknown Source) [na:1.8.0_101]
at com.sun.org.apache.xerces.internal.parsers.AbstractSAXParser.parse(Unknown Source) [na:1.8.0_101]
at com.sun.org.apache.xerces.internal.jaxp.SAXParserImpl$JAXPSAXParser.parse(Unknown Source) [na:1.8.0_101]
at com.sun.org.apache.xerces.internal.jaxp.SAXParserImpl.parse(Unknown Source) [na:1.8.0_101]
at org.thymeleaf.templateparser.xmlsax.AbstractNonValidatingSAXTemplateParser.doParse(AbstractNonValidatingSAXTemplateParser.java:209) [thymeleaf-2.1.5.RELEASE.jar!/:2.1.5.R
The Code for login page is as follows:-
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="Xenon Boostrap Admin Panel"/>
<meta name="author" content=""/>
<title>Login</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Arimo:400,700,400italic" media="screen"/>
<link rel="stylesheet" href="/static/css/fonts/linecons/css/linecons.css" th:href="#{/static/css/fonts/linecons/css/linecons.css}" media="screen"/>
<link rel="stylesheet" href="/static/css/fonts/fontawesome/css/font-awesome.min.css" th:href="#{/static/css/fonts/fontawesome/css/font-awesome.min.css}" media="screen"/>
<link rel="stylesheet" href="/static/css/bootstrap.css" th:href="#{/static/css/bootstrap.css}" media="screen"/>
<link rel="stylesheet" href="/static/css/xenon-core.css" th:href="#{/static/css/xenon-core.css}" media="screen"/>
<link rel="stylesheet" href="/static/css/xenon-forms.css" th:href="#{/static/css/xenon-forms.css}" media="screen"/>
<link rel="stylesheet" href="/static/css/xenon-components.css" th:href="#{/static/css/xenon-components.css}" media="screen"/>
<link rel="stylesheet" href="/static/css/xenon-skins.css" th:href="#{/static/css/xenon-skins.css}" media="screen"/>
<link rel="stylesheet" href="/static/css/custom.css" th:href="#{/static/css/custom.css}" media="screen"/>
<script th:src="#{/static/js/jquery-1.11.1.min.js}" src="/static/js/jquery-1.11.1.min.js"></script>
</head>
<body class="page-body login-page login-light">
<div class="login-container">
<div class="row">
<div class="col-sm-6">
<script type="text/javascript">
jQuery(document).ready(function($)
{
// Reveal Login form
setTimeout(function(){ $(".fade-in-effect").addClass('in'); }, 1);
// Validation and Ajax action
$("form#login").validate({
rules: {
username: {
required: true
},
passwd: {
required: true
}
},
messages: {
username: {
required: 'Please enter your username.'
},
passwd: {
required: 'Please enter your password.'
}
},
// Form Processing via AJAX
submitHandler: function(form)
{
show_loading_bar(70); // Fill progress bar to 70% (just a given value)
var opts = {
"closeButton": true,
"debug": false,
"positionClass": "toast-top-full-width",
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
};
$.ajax({
url: "data/login-check.php",
method: 'POST',
dataType: 'json',
data: {
do_login: true,
username: $(form).find('#username').val(),
passwd: $(form).find('#passwd').val()
},
success: function(resp)
{
show_loading_bar({
delay: .5,
pct: 100,
finish: function(){
// Redirect after successful login page (when progress bar reaches 100%)
if(resp.accessGranted)
{
window.location.href = 'dashboard-2.html';
}
}
});
// Remove any alert
$(".errors-container .alert").slideUp('fast');
// Show errors
if(resp.accessGranted == false)
{
$(".errors-container").html('<div class="alert alert-danger">\
<button type="button" class="close" data-dismiss="alert">\
<span aria-hidden="true">×</span>\
<span class="sr-only">Close</span>\
</button>\
' + resp.errors + '\
</div>');
$(".errors-container .alert").hide().slideDown();
$(form).find('#passwd').select();
}
}
});
}
});
// Set Form focus
$("form#login .form-group:has(.form-control):first .form-control").focus();
});
</script>
<!-- Errors container -->
<div class="errors-container">
</div>
<!-- Add class "fade-in-effect" for login form effect -->
<form th:action="#{/extra-login-light}" method="post" role="form" id="login" class="login-form fade-in-effect" autocomplete="on">
<div class="login-header">
<a href="dashboard-2.html" th:href="#{/dashboard-2.html}">
<img th:src="#{/static/images/white.jpg}" src="/static/images/white.jpg" alt="" height="" width="180" class="logo"/>
<img th:src="#{/static/images/xm_lockup.png}" src="/static/images/xm_lockup.png" alt="" height="45" width="220" class="logonew"/>
</a>
<p>Dear user, log in to access the admin area!</p>
</div>
<div class="form-group">
<label class="control-label" for="username">Username</label>
<input type="text" class="form-control" name="username" id="username" autocomplete="off"/>
</div>
<div class="form-group">
<label class="control-label" for="passwd">Password</label>
<input type="password" class="form-control" name="password" id="passwd" autocomplete="off"/>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block text-left">
<i class="fa-lock"></i>
Log In
</button>
</div>
<div class="login-footer">
Forgot your password?
<div class="info-links">
ToS -
Privacy Policy
</div>
</div>
</form>
<!-- Facebook Login
<div class="external-login">
<a href="#" class="facebook">
<i class="fa-facebook"></i>
Facebook Login
</a>
-->
<!--
<a href="<?php _hash(); ?>" class="twitter">
<i class="fa-twitter"></i>
Login with Twitter
</a>
<a href="<?php _hash(); ?>" class="gplus">
<i class="fa-google-plus"></i>
Login with Google Plus
</a>
-->
</div>
</div>
</div>
<!-- Bottom Scripts -->
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/TweenMax.min.js"></script>
<script src="/static/js/resizeable.js"></script>
<script src="/static/js/joinable.js"></script>
<script src="/static/js/xenon-api.js"></script>
<script src="/static/js/xenon-toggles.js"></script>
<script src="/static/js/jquery-validate/jquery.validate.min.js"></script>
<script src="/static/js/toastr/toastr.min.js"></script>
<!-- JavaScripts initializations and stuff -->
<script src="/static/js/xenon-custom.js"></script>
</body>
</html>
The error on the server appears like this
Error after trying to redirect to the new login page
I don't understand what the problem is. Why am I getting this error? I am using annotations and not the pom.xml file.
Also the css files aren't loading. My project structure appears like this:-
Project structure
Please go through the picture and the code again to find out to what is wrong.
Welcome to Thymeleaf!
Thymeleaf requires strict XHTML syntax.
As the error clearly suggest:
org.xml.sax.SAXParseException:
The element type "link" must be terminated by the matching end-tag "</link>".
Your page has a link element that you have not closed.
I am trying to use jquery-validate plugin to validate a form inside a bootstrap-dialog. The "required" rule doesn't prevent me from submitting a form with an empty text field. However, "digits" rule works so that means validation is initialized properly. What am I missing here? Thanks.
Here's how I display the bootstrap-dialog and how I initialize validation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>App Title</title>
<link type="text/css" rel="stylesheet" href="<c:url value="/css/bootstrap/3.0.3/bootstrap.min.css" />"></link>
<script src="<c:url value="/js/jquery/1.10.2/jquery-1.10.2.min.js" />"></script>
<script src="<c:url value="/js/jquery-ui/1.10.4/jquery-ui.min.js" />"></script>
<script src="<c:url value="/js/bootstrap/3.0.3/bootstrap.min.js" />"></script>
<script src="<c:url value="/js/bootstrap-dialog//bootstrap-dialog.min.js" />"></script>
<link type="text/css" rel="stylesheet" href="<c:url value="/css/style.css" />"></link>
<link type="text/css" rel="stylesheet" href="<c:url value="/css/jquery-ui/1.10.4/jquery-ui.min.css" />"></link>
<link type="text/css" rel="stylesheet" href="<c:url value="/css/bootstrap-dialog/bootstrap-dialog.min.css" />"></link>
<script src="<c:url value="/js/jquery-validation/1.11.1/jquery.validate.min.js" />"></script>
<script type="text/javascript">
function wireValidationEvent($form)
{
$form.validate({
errorElement: 'span',
errorClass: 'help-block',
wrapper: "div",
rules: {
name: {
required: true
}
},
messages: {
name: {
required: "Please enter the name properly."
}
},
highlight: function (element) {
$(element).closest('.form-group').addClass('has-error');
},
success: function (element) {
$(element).closest('.form-group').removeClass('has-error');
}
});
}
function showModalDialog(url)
{
var get = $.get(url, '');
get.done(function(data) {
// Note that data contains just a form without any button.
// The form is dynamically injected into the body of the modal dialog. That's why wireValidationEvent() is called each time when a form is injected.
// When Save button is clicked, the form will be submitted using jquery.
BootstrapDialog.show({
title: 'Update Form',
closable: true,
autodestroy: true,
onshow: function(dialogRef){
var $body = dialogRef.getModalBody();
$body.append(data.trim());
var $formObj = $body.find('#formOfReligion');
if ($formObj)
{
// TODO bug: required validation rule doesn't work here
wireValidationEvent($formObj);
}
else
{
alert('formOfReligion is missing');
}
},
buttons: [{
label: 'Save',
action: function(dialog) {
var formObj = $('#formOfReligion');
if (formObj && formObj.length > 0)
{
var form = formObj[0];
var post = $.post(form.action, formObj.serialize());
post.done(function( data ) {
// succeeded
dialog.close();
$('#frmQuery').submit();
});
post.fail(function( data ) {
// failed
});
}
}
}, {
label: 'Cancel',
action: function(dialog) {
dialog.close();
}
}]
});
});
return true;
}
</script>
Here's what the modal dialog looks like.
<div class="modal-backdrop fade in"></div>
<div id="bea044b7-a0cb-48df-8b57-6cbdedac9bdf" class="modal fade bootstrap-dialog type-primary size-normal in" tabindex="-1" style="display: block;" aria-hidden="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="bootstrap-dialog-header">
<div class="bootstrap-dialog-title">Update Form</div>
<div class="bootstrap-dialog-close-button" style="display: block;">
<button class="close">×</button>
</div>
</div>
</div>
<div class="modal-body">
<div class="bootstrap-dialog-body">
<div class="bootstrap-dialog-message"></div>
</div>
<form id="formOfReligion" class="form-horizontal" role="form" method="POST" action="/prs/protected/test" novalidate="novalidate">
<fieldset>
<div class="form-group">
<div>
<label class="control-label" for="name">Name</label>
</div>
<div>
<input id="id" type="hidden" value="6" name="id">
<input id="name" class="form-control" type="text" value="test" autofocus="autofocus" name="name">
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<div class="bootstrap-dialog-footer">
<div class="bootstrap-dialog-footer-buttons">
<button id="667d578f-490e-4d08-a8c1-1013b60c3394" class="btn btn-default">Save</button>
<button id="8b647389-edce-4f64-af8e-64521e865dcf" class="btn btn-default">Cancel</button>
</div>
</div>
<input id="id" type="hidden" value="6" name="id">
<input id="name" class="form-control" type="text" value="test" autofocus="autofocus" name="name">
You have a hard-coded value of "test" on the input so the required rule is already satisfied without the user having to enter anything.
BTW: I don't think you have a good naming system here: id="id", name="id", id="name", and name="name". It's not semantic, not scalable, and potentially confusing.
I am using phonegap and jquery mobile to build a web app, django on the server side. First, i start out from index.html page,and inject a login form from server into index.html and change page to the jquery mobile page containing the sign in form. But the problem is that the form is getting submitted but not in ajax, but if i test it in web browser,it works. I have already white listed the domain name in config.xml file.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<title>Hello World</title>
</head>
<body>
<div data-role="page">
<div class="app" style="display:none;">
<h1>PhoneGap</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<div data-role="header">
<h1>DOCTORSLOG</h1>
</div>
<div data-role="content">
</div>
</div>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
$(function(){
$.ajax({
url: 'http://doctorslog.net/mobile/login-test/',
success: function(data){
//append the response(sign-in.html) to the body
$('body').append(data);
}
});
});
</script>
</body>
</html>
sign-in.html
<div data-role="page" data-fullscreen="true" id="login">
<div data-role="header" data-theme="b">
<h1 id="title">DOCTORSLOG</h1>
</div>
<div data-role="content">
<form id="sign_in_form" method="post" action="http://doctorslog.net/mobile/login/">{% csrf_token %}
<div data-role="fieldcontain">
<label for="id_username" style="font-size: 1.3em;line-height: 350%;">Username</label>
<input id="id_username" style="font-size: 1.8em;font-weight: bold;font-family: Tahoma,Verdana,serif;" type="text" maxlength="30" name="username" autocomplete="off">
</div>
<div data-role="fieldcontain">
<label for="id_password" style="font-size: 1.3em;line-height: 350%;">Password</label>
<input id="id_password" style="font-size: 1.8em;font-weight: bold;font-family: Tahoma,Verdana,serif;" type="password" name="password">
</div>
<div style="width: 100%;text-align: center;font-size: 1.6em;">
<input id="sign-in-btn" type="submit" data-inline="true" value="Sign me in" />
</div>
<input type="hidden" name="next" value="{% firstof next '/home/' %}"/>
<input id="hiddenID" type="hidden" name="regID" value=""/>
</form>
</div>
<script>
$(function(){
//change active page to this page and since it is a jquery mobile page with data-role=page,i expect automatic ajax submission on clicking submit button
$(':mobile-pagecontainer').pagecontainer('change','#login');
$('#sign_in_form').trigger('create');
});
</script>
</div>
The question is, if i can make Ajax GET request,why can not i make POST request. Any help is appreciated. Thanks.
Ok, i have solved this issue by disabling jquery mobile default form hijacking by setting data-ajax="false" on the form tag and submitting the form by $.ajax . Nothing like $.mobile.allowCrossDomainPages worked. And i also have set Access-Control-Allow-Origin response headers on the server side , really did not know if this is required.
Here is the script to submitform -
$(function(){
$('#sign_in_form').submit(function(e){
e.preventDefault();
$.mobile.loading('show');
var url = $(this).attr('action');
var data = $(this).serializeArray();
$.ajax({
beforeSend:function(jqXHR,settings){
jqXHR.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
},
url:url,
type:'POST',
data:data,
crossDomain:false,
success: function(data){
$.mobile.loading('hide');
$('body').append(data);
}
});
});
});
I am using MVC 2 with aspx view engine.
In one partial view i am opening one modal popup with "bootstrap-modal.js".
In that client side validation is not working.
When i render my view like "<% Html.RenderPartial("Myview"); %> " and <% Html.RenderAction("Myview"); %> , client side validation is working fine. But, it is not working when i load my partial view with jquery dynamically.
I read the following discussions and apply as per guide in it, but no success.
https://stackoverflow.com/a/9324173/1752787
Unobtrusive validation doesn't work with Ajax.BeginForm
http://forums.asp.net/t/1716864.aspx/1
What is my little mistake ?
My Main view :
<%# Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Home Page
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<link href="../../Content/BoroTheame/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="../../Content/BoroTheame/bootstrap-responsive.min.css" rel="stylesheet"
type="text/css" />
<link href="../../Content/BoroTheame/colorbox.css" rel="stylesheet" type="text/css" />
<link href="../../Content/BoroTheame/fullcalendar_beoro.css" rel="stylesheet" type="text/css" />
<link href="../../Content/BoroTheame/beoro.css" rel="stylesheet" type="text/css" />
<link href="../../Content/BoroTheame/datatables_beoro.css" rel="stylesheet" type="text/css" />
<link href="../../Content/BoroTheame/TableTools.css" rel="stylesheet" type="text/css" />
<link href="../../Content/BoroTheame/ModelPopupcss.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/modernizr-2.6.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-migrate-1.0.0.js" type="text/javascript"></script>
<script src="../../Scripts/bootstrap.min.js" type="text/javascript"></script>
<script src="../../Scripts/bootstrap-modal.js" type="text/javascript"></script>
<script src="../../Scripts/bootstrap-modalmanager.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcValidation.debug.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
<%--<script src="../../Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>--%>
<script src="../../Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
function loadPartialViewForManageUser() {
// alert('ajax..');
$.ajax({
type: "POST",
cache: false,
url: 'Home/test',
success: function (html) {
$("#divContactInfo").html(html);
$.validator.unobtrusive.parse($("#divContactInfo"));
// var form = $("#divContactInfo").closest("form");
// form.removeData('validator');
// form.removeData('unobtrusiveValidation');
// $.validator.unobtrusive.parse(form);
},
error: function (e, args) {
}
});
return false;
}
</script>
<h2>
<%: ViewData["Message"] %></h2>
<p>
To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">
http://asp.net/mvc</a>.
</p>
<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal" onclick="return loadPartialViewForManageUser();">
Launch demo modal</a>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×</button>
<h3 id="myModalLabel">
Modal header</h3>
</div>
<div class="modal-body">
<p>
One fine body…</p>
<%-- <% Html.RenderPartial("test"); %>--%>
<div id="divContactInfo">
<%--<% Html.RenderAction("test"); %>--%>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">
Close</button>
<button class="btn btn-primary">
Save changes</button>
</div>
</div>
My Partial view :
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<DataAnnotation.Models.TestDA>" %>
<script type="text/javascript">
// $.validator.unobtrusive.parse("form");
// $.validator.unobtrusive.parse(document);
var onSuccess = function (divContactInfo) {
// enable unobtrusive validation for the contents
// that was injected into the <div id="result"></div> node
//$.validator.unobtrusive.parse($(divContactInfo));
// var form = $('#testform')
// .removeData("validator") /* added by the raw jquery.validate plugin */
// .removeData("unobtrusiveValidation"); /* added by the jquery unobtrusive plugin */
// $.validator.unobtrusive.parse(form);
};
</script>
<% Html.EnableClientValidation(); %>
<% using (Ajax.BeginForm("Index", "Home", new AjaxOptions
{
OnBegin = "onSuccess",
UpdateTargetId = "divContactInfo"
}, new { #id = "testform" }))
{%>
<%: Html.ValidationSummary(true)%>
<fieldset>
<legend>Fields</legend>
<div class="editor-label">
<%: Html.LabelFor(model => model.name)%>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.name)%>
<%: Html.ValidationMessageFor(model => model.name)%>
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
<% } %>
This is My Controller :
[HandleError]
public class HomeController : Controller
{
public ActionResult Index()
{
ViewData["Message"] = "Welcome to ASP.NET MVC!";
return View();
}
public ActionResult About()
{
return View();
}
[HttpPost]
public ActionResult Index(TestDA model)
{
if (ModelState.IsValid)
{
}
else
{
}
return View("test", model);
}
public ActionResult test()
{
return PartialView("test");
}
}
This is my Model :
public class TestDA
{
[Required]
[DisplayName("Your Name")]
public string name { get; set; }
}
I solved it, by adding below script blog :
<script type="text/javascript">
Sys.Mvc.FormContext._Application_Load();
$("#form0").submit(function (e) {
if (!Sys.Mvc.FormContext.getValidationForForm(this).validate('submit').length) {
$.post("/ManageUser/SaveContactInfo", $(this).serialize(), function (data) {
$("#divContactInfo").html(data);
});
}
e.preventDefault();
});
</script>
For more info read this :
http://weblogs.asp.net/imranbaloch/archive/2010/07/11/asp-net-mvc-client-side-validation-with-dynamic-contents.aspx
I'm now implement Windows Phone with Phonegap Cordova 2.0.0 and Jquery Mobile 1.1.1 final
and I'm be stuck with using local JSON file due to Window Phone Emulator not load JSON data
to <select> element while both iOS and Android emulators run smoothly. And this is my snippet code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />
<link rel="stylesheet" href="css/jqm-icon-pack-2.1.2-fa.css" />
<script type="text/javascript" src="js/cordova-2.0.0.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript" charset="utf-8">
function changeBaseAmount() {
alert($('#baseAmount').val());
}
$.getJSON('json/currencies.json',
function (data) {
alert("get json");
$.each(data, function (key, value) {
$('#currency1').append("<option value='" + key + "'>" + value + "</option>");
$('#currency2').append("<option value='" + key + "'>" + value + "</option>");
});
});
</script>
</head>
<body>
<!-- Home Page -->
<div data-role="page" data-theme="b">
<div data-role="header" data-theme="b">
<h1>Convert Currency</h1>
</div>
<div data-role="content" data-theme="b">
<div id="baseAmountDiv" data-role="fieldcontain">
<label for="baseAmount">Amount:</label>
<input id="baseAmount" type="text" value="" onchange="changeBaseAmount()"></input>
</div>
<div id="currency1Div" data-role="fieldcontain">
<label for="currency1">Currency From:</label>
<select id="currency1" onchange="changeCurrency1()">
<option value="ZZ">Please Select Currency From</option>
</select>
</div>
<div id="currency2Div" data-role="fieldcontain">
<label for="currency2">Currency To:</label>
<select id="currency2" onchange="changeCurrency2()">
<option value="ZZ">Please Select Currency To</option>
</select>
</div>
<div id="resultAmountDiv" data-role="fieldcontain">
<label for="resultAmount">Result:</label>
<input id="resultAmount" type="text" value="" readonly="readonly" style="background-color: silver"></input>
</div>
</div>
<div data-role="footer" data-theme="b"></i></div>
</div>
</body>
</html>
Cordova for WP7 has its own implementation of XHR requests in order to support fetching local data. See the following:
https://issues.apache.org/jira/browse/CB-208
You might have to use $.ajax in order for this to work properly.