Client Side Validation with ASP.NET MVC 2 using SPARK view engine - asp.net-mvc-2

Is there a way to use Client Side Validation with the SPARK view engine?
I have the following SPARK view:
<script type="text/javascript" src="~/content/script/shared/MicrosoftAjax.js?${ApplicationStartTime}"></script>
<script type="text/javascript" src="~/content/script/shared/jquery-ui-1.7.2.custom.min.js?${ApplicationStartTime}"></script>
<script type="text/javascript" src="~/content/script/shared/jquery.validate.min.js?${ApplicationStartTime}"></script>
<script type="text/javascript" src="~/content/script/shared/jquery.validate.unobtrusive.js?${ApplicationStartTime}"></script>
<script type="text/javascript" src="~/content/script/shared/MicrosoftMvcJQueryValidation.js?${ApplicationStartTime}"></script>
<viewdata model="Business.Models.Development.Dtos.DonationFormDto" />
#Html.EnableClientValidation();
<form id="form" action="~/development/donate.mvc" method="post">
<label>
*First Name
</label><br/>
<input type="text" name="model.FirstName" Id="FirstName" value="${Model.FirstName}"/> ${Html.ValidationMessage("model.FirstName")}
<br/>
</form>
Server-side validation works fine, but client-side validation doesn't.
I can make it work by using ASP.NET Helpers and form syntax like so:
using (Html.BeginForm("Index", "Donate", FormMethod.Post, new {id = "form", action="donate.mvc" }))
{
<%=Html.LabelFor( model => model.FirstName) %><br/>
<%=Html.TextBoxFor(model => model.FirstName)%>
<%=Html.ValidationMessageFor( model => model.FirstName) %><br/>
}
But then my model doesn't bind correctly and sever-side validation fails on submit.
Any suggestions? Is abandoning SPARK and creating a classic strongly-typed view the only option?

#KarlBear, why did you use "<%=" instead of "${...}" or "!{...}" in spark ?
${Html.LabelFor( model => model.FirstName)}<br/>
${Html.TextBoxFor(model => model.FirstName)}
${Html.ValidationMessageFor( model => model.FirstName)]<br/>

Related

Passing form data to the JSP without passing to the server

html>
<head>
<title>Landing</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
</head>
<body>
<form name="testForm" action="move.jsp">
<label><h1>Enter the data <h1/></label><br/>
<input type="text" name="DATA"><br/>
<input type="submit">
</form>
<% out.println(DATA) %> <!-- WRONG!! -->
</body>
</html>
Please ignore the action part
I am working on a spring mvc project and I have a problem. What I want is that, when the user clicks submit, we should not leave the page, we should just stay. But the values submitted would be used as a parameter to a function in the same page. Here, let's just say I want to print it, and that is the part that is wrongly entered.
What should I do to accomplish this? Please help
You can use ajax here when your submit button is clicked call this function and then using this call your ajax passed the value from your input to your server and then at your server side perform operation which you needed to do and then the result back to ajax .
Your form :
<form name="testForm" action="move.jsp">
<label><h1>Enter the data <h1/></label><br/>
<input type="text" name="DATA"><br/>
<input type="button" onclick="submit_values()">
<!--^^added this-->
</form>
<div id="result"><!--here data will come back--></div>
Then on click of your button submit_values() function will get called . i.e :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script>
function submit_values() {
//get input value
var values = $("input[name='DATA']").val();
console.log(values);
$.ajax({
type: 'POST',
data: {
values: values//passing to server
},
url: "Your_server_url",
success: function(data) {
alert(data);//this will display whatever server will return
$("#result").html(data);//add response back to show
}
});
}
</script>
Then at your server-side do like below :
String data =request.getParameter("values");//get value
String send_back = something(data);//call your function
out.println("DATA BACK"+send_back );//this will go back to ajax

How to properly use JSExport methods in a JSExportTopLevel object in Scala.js from a <script> tag?

I have some sjs code:
#JSExportTopLevel("CCRS")
object JsApi {
#JSExport
def makeJobId: JobId = JobId()
// ...
}
I have the following <body> element, which I'll note is properly finding the sjs-generated .js files since I was using a 3rd party SPA framework previously - though the launcher for that is now commented out:
<body>
<script type="application/javascript" src="ace/ace.js" charset="utf-8"></script>
<script type="application/javascript" src="target/web-client-jsdeps.js"></script>
<script type="application/javascript" src="target/web-client-opt.js"></script>
<!-- <script src="target/web-client-launcher.js"></script> -->
<input type="text"
placeholder="Enter a command:"
value="pwd"
onkeydown="oneShotHandler()" />
<div id="one-shot-demo"></div>
<script type="application/javascript">
var oneShotId = CCRS.makeJobId();
</script>
</body>
Upon page load, I get the following error: TypeError: CCRS.makeJobId is not a function.
Not really sure what I should be looking for in the generated web-client-opt.js file (using sjs 0.6.22 currently, with -P:scalajs:sjsDefinedByDefault). But, I do see this line, which I believe should be doing the export:
$e.CCRS = $m_Lorg_xsede_jobrunner_client_JsApi$();
I realized this just as I was finishing typing my question. The beauty of talking it out.
In Scala.js, I needed to add the () to my method:
#JSExport
def makeJobId(): JobId = JobId()

prevent form default behavior in Vue.js

I'm building a Vue.js app with a form and I was wondering is there a way to prevent the HTML 5 forms default behavior using Vue.js built in .prevent? I have tried <form.prevent> and <form v-on:submit.prevent> but to no avail. Any help here would be great?
The v-on directive (shorthand #) is to bind a Vue instance method or a JS expression to an event:
Attaches an event listener to the element. […] The expression can be a method name, an inline statement, or omitted if there are modifiers present.
Therefore even if you do not specify a method or an expression / inline statement, your .prevent modifier should work in any case:
new Vue({
el: '#app',
methods: {
formSubmit() {
console.log('form submitted');
},
},
});
<script src="https://unpkg.com/vue#2"></script>
<div id="app">
<form #submit.prevent>
<span>Form WITH submit.prevent and no expression attached</span>
<button type="submit">Submit form</button>
</form>
<form #submit.prevent="formSubmit">
<span>Form WITH submit.prevent</span>
<button type="submit">Submit form</button>
</form>
<form #submit="formSubmit">
<span>Normal form without prevent</span>
<button type="submit">Submit form</button>
</form>
</div>

How to use Parsley.js with dynamic content

I am using parsley.js 2.0.2. for client side form validation.
Now I noticed on the Parsley Website that parsley 2.x has dynamic form validation.
I have a form on my page with parsley. It works correctly and does validate. Now on the same page I have a link that dynamically adds a form from an external file. Issue is now parsley.js won't validate the newly added form.
On the parsley website they have an example where one can use JavaScript to validate but I tried it and it does not work. Here is the snippet code of the example:
<script src="jquery.js"></script>
<script src="parsley.min.js"></script>
<form id="form">
...
</form>
<script type="text/javascript">
$('#form').parsley();
</script>
I am aware that the content in the DOM changed but is there a way that I can tell parsley to validate this newly added form or something that will trigger the validation process?
I will appreciate the help!
Thanks
Here is my form on the index.php page (This form does successfully validate):
<form action="server.php" method="post" name="main-form" id="myForm" data-parsley-validate>
<div>
<label for="njsform-name">Name</label>
<input name="name" type="text" id="njsform-name" placeholder="Mike" data-parsley-required="true" data-parsley-minlength="2">
</div>
<div>
<label for="njsform-email">Surname</label>
<input name="email" type="text" id="njsform-email" placeholder="Gates" data-parsley-required="true" parsley-minlength="2">
</div>
<div class="submitWrap">
<input class="submit" type="submit" value="Apply Now" />
</div>
Here is the link that gets the external content
<ul class="services-list">
<li><a class="s-option" href="views/form-short_term_loans.php">My Link</a></li>
</ul>
Here is the code I am using to dynamically change the content (does successfully retrieve external form and populates):
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('.services-list li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #form-section';
$('#form-section').load(toLoad)
}
});
$('.services-list li a').click(function(){
var toLoad = $(this).attr('href')+' #form-section';
$('#form-section').hide('fast',loadContent);
$('#load').remove();
$('#intro-section').append('<span id="load">Getting required form...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#form-section').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#form-section').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
});
The second form is just a duplicate but the form id is myForm2 and the name second-form
Add a call to
$('#xxxxxx').parsley();
After the load of the new form. With xxxxx the id of the new form inserted in the DOM

Simple ui datepicker do not works

I have problems with this datepicker http://jqueryui.com/demos/datepicker/
<script>
$(function() {
$( "#datepicker1" ).datepicker({ dateFormat: 'yy-mm-dd' });
});
</script>
<script>
$(function() {
$( "#datepicker2" ).datepicker({ dateFormat: 'yy-mm-dd' });
});
</script>
<div id="checkinWrapper" class="input-wrapper">
<input type="text" id="datepicker1" style="width:118px;" class="checkin search-option hasDatepicker" name="checkin" placeholder="Поаѓаме на">
<span></span>
</div>
<div id="checkoutWrapper" class="input-wrapper">
<input type="text" id="datepicker2" style="width:118px; margin-left:2px;" class="checkout search-option hasDatepicker" name="checkout" placeholder="Се враќаме">
<span></span>
</div>
When I test it on a blank page it works okay but when I implement it in my current design it don't works (do not show). I don't know what causes that. Here are the scripts that I include:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
Maybe the problem occurs becouse I have other jQuery scripts implemented in my current design ? Any solution ?
If you remove the hasDatepicker class from both input tags it will work.
The datepicker plugin adds this class itself, as the class already exists no datepicker is created...
See http://jsfiddle.net/UYGXh/ for a working (non styled) example