I want to create a Captcha to add new users on my website. To do this I'm trying to use the CaptchaMvc.Mvc5 but it doesn't show de refresh button to change the captcha image.
Looking at the developer inspect of Chrome it has an exception about Uncaught ReferenceError: $ is not defined at add:271 and I think this is the problem, then, in this line has this code below generated by CaptchaMvc.Mvc5.
line 271
<div class="text-center">
<script type="text/javascript">
$(function () {$('#0e12b41cddf84cd6a548118316ab8aed').show();}); //line 271
function ______3eec991ccebe425ba220485ba983374e________() { $('#0e12b41cddf84cd6a548118316ab8aed').hide(); $.post("/DefaultCaptcha/Refresh", { t: $('#CaptchaDeText').val() }, function(){$('#0e12b41cddf84cd6a548118316ab8aed').show();}); return false; }</script>
<br/>
<img id="CaptchaImage" src="/DefaultCaptcha/Generate?t=d230fe1e79a3448f987705cf22a90432"/><input id="CaptchaDeText" name="CaptchaDeText" type="hidden" value="d230fe1e79a3448f987705cf22a90432" /> <br/>Refresh<br/>Digite o texto da imagem acima<br/><input autocomplete="off" autocorrect="off" data-val="true" data-val-required="Texto requerido" id="CaptchaInputText" name="CaptchaInputText" type="text" value="" /><br/><span class="field-validation-valid" data-valmsg-for="CaptchaInputText" data-valmsg-replace="true"></span>
<span class="field-validation-valid" data-valmsg-for="CaptchaInputText" data-valmsg-replace="true"></span>
</div><!--/captcha-->
How could I fix it ?
My Html
#{
var captcha = Html.Captcha("Refresh", "Digite o texto da imagem acima", 5, "Texto requerido", true);
}
<div class="text-center">
#captcha
#Html.ValidationMessage(captcha.BuildInfo.InputElementId)
</div><!--/captcha-->
Related
I am very new to AngularJS and trying to understand how AngularJS can use along with ASP.NET-MVC5 application. In my first attempt I want to run AngularJS app from basic HTML page (in my case index.html) where app holding form template in html format, also I have add global variable, controller, service via factory and directives but I cannot manage to run this app 'employee-form' inside index.html. In order to test if angularJS is initialize and working properly, I have added very basic angularjs code inside in html and it works.. I am not sure where I have done mistake
AngularFormsApp.js (global variable)
var angularFormsApp = angular.module('angularFormsApp', []);
efController.js
angularFormsApp.controller('efController',
function efController($scope, efService) {
$scope.employee = efService.employee;
});
efService.js
angularFormsApp.factory('efService',
function () {
return {
employee: {
fullName: "Khurram Zahid",
notes: "The ideal employee, just don't mess with him",
department: "IT Development",
perkCar: true,
perkStock: false,
perkSixWeeks: true,
payrollType: "none"
}
}
});
efDirective.js
angularFormsApp.directive('employeeForm',
function () {
return {
restrict: 'E', //E stands for element, meaning we want to use this directive as element
templateUrl: '~/App/EmployeeForm/efTemplate.html'
}
});
efTemplate.html (form)
<div class="form-group">
<label for="fullName">Name</label>
<input type="text" id="fullName" name="fullName" class="form-control" />
</div>
<div class="form-group">
<label for="notes">Notes</label>
<input type="text" id="notes" name="notes" class="form-control" />
</div>
<div class="form-group">
<label for="department">Department</label>
<select id="department" name="department" class="form-control">
<option>Engineering</option>
<option>Marketing</option>
<option>Finance</option>
<option>IT Development</option>
</select>
</div>
<br/>
<span><b>Perks</b></span>
<div class="checkbox">
<label><input type="checkbox" value="perCar"/>Company Car</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="perkStock" />perk Stock</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="perkSixWeeks" />perk Six Weeks</label>
</div>
<input type="submit" value="Submit Form" />
index.html
<!DOCTYPE html>
<html>
<head >
<title>Angular JS</title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="App/AngularFormsApp.js"></script>
<script src="App/EmployeeForm/efController.js"></script>
<script src="App/EmployeeForm/efService.js"></script>
<script src="App/EmployeeForm/efDirective.js"></script>
</head>
<body ng-app="angularFormsApp">
<div class="AngularJSTestBlockCode">
<div>
<input type="text" ng-model="name" />
<br />
<h1>Hello {{name}}</h1>
</div>
<br /><br />
<div>
{{458/8}}
</div>
</div>
<div>-------------------------------------------------------</div> <br/><br/>
<div ng-controller="efController">
<employee-form>????????????????????
</div>
You need a route provider to render your html page. Here is your example
.config(['$stateProvider',function($stateProvider) {
$stateProvider.state('dashboard', {
url:'/dashboard',
templateUrl: 'views/dashboard/main.html',
})
.state('dashboard.create-example',{
templateUrl:'views/example/create.html',
url:'/create-example',
controller:'Ctrl'
})
then in your controller(efController.js) put this $state.transitionTo('dashboard.create-example'); to render your page to any html you want
I'm using the bootstrap datetimepicker library like so:
#using (Html.BeginForm("Search", "Home", FormMethod.Post))
{
<div id="searchContainer">
<div class="well">
<div id="datetimepicker1" class="input-append date">
<input data-format="dd/MM/yyyy hh:mm:ss" type="text" id="StartDate" />
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar">
</i>
</span>
</div>
</div>
<div class="well">
<div id="datetimepicker2" class="input-append date">
<input data-format="dd/MM/yyyy hh:mm:ss" type="text" id="EndDate" />
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar">
</i>
</span>
</div>
</div>
#Html.Bootstrap().SubmitButton().HtmlAttributes(new { #class = "btn" })
</div>
}
This is another try:
#using (Html.BeginForm("Search", "Home", FormMethod.Post))
{
<div id="searchContainer">
#Html.Bootstrap().TextBoxFor(model => model.StartDate).HtmlAttributes(new { id = "datetimepicker1", #class = "input-append date" }).AppendIcon("icon-calendar")
#Html.Bootstrap().TextBoxFor(model => model.EndDate).HtmlAttributes(new { id = "datetimepicker2", #class = "input-append date" }).AppendIcon("icon-calendar")
#Html.Bootstrap().SubmitButton().HtmlAttributes(new { #class = "btn" })
</div>
}
JQuery:
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({
language: 'en'
});
});
$(function () {
$('#datetimepicker2').datetimepicker({
language: 'en'
});
});
</script>
The first chunk of code where the divs are used, work fine when selecting a date and time. But the second one with the razor syntax doesn't.
When using the first chunk for selecting a date and time, it's not posted to the server when button is pressed.
The model only contains the 2 dates:
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
Does anyone see what I might be doing wrong here?
EDIT
With "it doesn't work" when using the Razor syntax, the datetimepicker just didn't show up, nothing happened. Now I have been testing some further, i get a runtime error pointing to this line in the datetimepicker.min.js file:
offset.top=offset.top+this.height;
And this is the error message it pops up in a dialog:
Unhandled exception at line 26, column 5290 in
http://tarruda.github.io/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js
0x800a138f - JavaScript runtime error: Unable to get property 'top' of
undefined or null reference
This is the rendered html of the form:
<form action="/Home/Search" method="post"> <div id="searchContainer">
<select class="chzn-select" data-placeholder="Select items" id="Ids" multiple="multiple" name="Ids"><option value="1">test0</option>
<option value="2">test1</option>
<option value="3">test2</option>
<option value="4">test3</option>
<option value="5">test4</option>
<option value="6">test5</option>
</select>
<div class="input-append"><input class="input-append date" data-val="true" data-val-date="The field Start Date must be a date." data-val-required="The Start Date field is required." id="datetimepicker1" name="StartDate" type="text" value="1-1-0001 0:00:00" /><span class="add-on"><i class="icon-calendar"></i></span></div>
<div class="input-append"><input class="input-append date" data-val="true" data-val-date="The field End Date must be a date." data-val-required="The End Date field is required." id="datetimepicker2" name="EndDate" type="text" value="1-1-0001 0:00:00" /><span class="add-on"><i class="icon-calendar"></i></span></div>
<button class="btn btn" type="submit">Submit</button>
</div>
</form>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({
language: 'en'
});
});
$(function () {
$('#datetimepicker2').datetimepicker({
language: 'en'
});
});
</script>
<style type="text/css">
#searchContainer {
margin-top:10%;
}
</style>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div class="container">
<p>© 2013 - My ASP.NET MVC Application</p>
</div>
</div>
<script type="text/javascript" src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js"></script>
Your first approach has the problem, that you omitted the name attributes for the input fields. The name attribute defines what variable is posted by the form.
Just write :
<input ... type="text" id="StartDate" name="StartDate />
For your second try:
But the second one with the razor syntax doesn't.
What do you mean with doesn't work? Can you show the rendered HTML?
For the second try:
If you look at the documentation for bootstrap datetime-picker, it shows that the id attribute #datetimepicker1 should be applied to the container of the input. Instead you are applying it to the input itself.
Also it seems that attributes data-time-icon="icon-time" data-date-icon="icon-calendar" need to be applied to the <i> tag, which TwitterBootstrapMVC does not do out of the box.
Either submit an issue to the TwitterBootstrapMVC to add an overload to .IconAppend method to also take Icon class that you'd be able to customize however you want... or better yet, fork it make the necessary change and submit a pull request.
I changed my model to accept a string instead of a DateTime object, and that fixed it.
Instead of styling the data-valmsg-summary produced by Html.ValidationSummary() in a custom way, I would like to just show the box with the twitter bootstrap style applied to it whenever the field validation fails. How would I go about doing this? Currently my markup looks like this:
..
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<div class="container">
<div class="row-fluid">
<br />
<br />
<br />
<br />
</div>
<div class="row-fluid">
<form class="navbar-form pull-right" action="/Login?ReturnUrl=%2F" method="post">
<h3 class="modal-header">Please sign in</h3>
<input data-val="true" data-val-required="The Username field is required." id="Username" name="Username" type="text" class="input-large" placeholder="Username">
<input data-val="true" data-val-required="The Password field is required." id="Password" name="Password" type="password" class="input-large" placeholder="Password">
<label class="checkbox">
<input type="checkbox" value="remember-me">
Remember me
</label>
<button type="submit" class="btn btn-danger">Sign in</button>
<br />
<br/>
<div data-valmsg-summary="true" class="alert alert-danger alert-block" id="formval" >
<span class="close pull-right" data-dismiss="alert">×</span>
<strong>Ooops!</strong> You seem to be missing something:
<ul>
<li style="display: none"></li>
</ul>
</div>
</form>
</div>
</div>
I've tried adding the style="display: none" to my div, but that does not seem to do the trick either.
I was looking for something else and stumbled on this. Thought I would post the answer for the next person since I am 5 months late. Add to your document ready.
//I dont want to validate my ajax forms take that if statement out if you want 2.
if ($('form:not([data-ajax="true"])').length != 0) {
var settings = $.data($('form:not([data-ajax="true"])')[0], 'validator').settings;
settings.submitHandler = function (form) {
//success
form.submit();
};
}
$("form").bind("invalid-form.validate", function (form, validator) {
var errors = validator.numberOfInvalids();
var message = "<ul>";
//loop thru the errors
for (var x = 0; x < validator.errorList.length; x++) {
var $group = $(validator.errorList[x].element).parent().parent(); //gets bootstrap class of form-group
var $element = $(validator.errorList[x].element); // gets the element to validate
var elementMessage = validator.errorList[x].message; // gets the message
$group.addClass("has-error"); // adds the bootstrap class has-error to the group
$element.popover({ content: elementMessage, placement: "right" }).popover("show"); // adds a popover
message += "<li>" + elementMessage + "</li>"; //appends message to list
}
message += "</ul>";
// Function I have to add alert to the page, but basically you can do whatever you want with the message now.
RegisterError("There was some errors with your submission!", message, false);
});
I have a form that I have 2 different sets of formfields that are utilized depending on a select box value. The problem I am having is when I try to disable the irrelevant input fields, I the disabled attribute comes up as: disabled="" instead of disabled="disabled" here is the code I am using. It is a fairly complicated form so I will use the relevant fields so I can try to keep it as simple as possible for you all. If you think something is missing... please let me know if you need to see more.
<cfform id="entry-form" ACTION="index-10.cfm?Company" name="send" class="uniForm">
<div class="ctrlHolder"><label for="" style="display:none"><em>*</em>Builder or Individual</label>
<cfselect name="select1" id="select1">
<option value="" <cfif Individual is "">selected="selected"</cfif>>Who is this Case for? (choose one)</option>
<option value="0"<cfif Individual is 1>selected="selected"</cfif>>An Individual Home Owner</option>
<option value="1"<cfif Individual is not 1 and Individual is not "">selected="selected"</cfif>>A Builder</option>
</cfselect>
<p class="formHint">A selection is required</p>
</div>
<!--- this is for individual home owner. --->
<div class="hide" id="hide1">
<div class="ctrlHolder"><label for="" style="display:none"><em>*</em>First name</label>
<cfinput type="text"
name="FirstName"
id="FirstName"
data-default-value="Enter your first name"
size="35"
class="textInput required validateAlpha"
maxlength="50"
value="#FirstName#">
<p class="formHint">First Name is required</p>
</div>
</div>
<div class="hide" id="hide2">
<div class="ctrlHolder"><label for="" style="display:none"><em>*</em>Builder Name</label>
<cfinput type="text" id="builder"
name="BuilderName"
data-default-value="Type a builder's name"
size="35"
class="textInput required"
value="" />
<p class="formHint">Builder's name is required</p>
<cfinput id="builder_hidden" name="BuilderID" type="hidden" value="" />
<cfinput id="builder_hidden_plan" name="PlanID" type="hidden" value="" />
</div>
</div>
</cfform>
<script>
$(document).ready(function(){
$("#select1").change(function(){
if ($(this).val() == "1" ) {
$("#hide2").slideDown("fast"); //Slide Down Effect
$("#hide1").slideUp("fast");
$("#FirstName").prop("disabled", true);
$("#builder").prop("disabled", false);
} else if ($(this).val() == "0" ){
$("#hide1").slideDown("fast"); //Slide Down Effect
$("#hide2").slideUp("fast");
$("#FirstName").prop("disabled", false);
$("#builder").prop("disabled", true);
}
});
</script>
I am using:
jquery-1.9.1.js
jquery-ui-1.10.1.custom.js
uni-form-validation.jquery.js
I found the issue. The disabled property was being added. It was the required class that was keeping this from working. I added removeClass and addClass methods in order to correct this.
Please change the jQuery 'prop' to 'attr' & check the below script once it works fine.....
<script type="text/javascript">
$(document).ready(function(){
$("#select1").change(function(){
if ($(this).val() == "1" ){
$("#hide2").slideDown("fast"); //Slide Down Effect
$("#hide1").slideUp("fast");
$("#firstname").attr("disabled", "disabled");
$("#builder").attr("disabled", false);
}
else if ($(this).val() == "0" ){
$("#hide1").slideDown("fast"); //Slide Down Effect
$("#hide2").slideUp("fast");
$("#firstname").attr("disabled", false);
$("#builder").attr("disabled", "disabled");
}
});
});
I need some sort on onclick function for my jquery mobile/php website. The following on-click wont work...
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
_END;
$int = 0;
foreach (array_slice($list,1) as $value) {
echo <<<_END
<input type="checkbox" name="checkbox-$int" id="checkbox-$int" class="custom" />
<label for="checkbox-$int">$value</label>
_END;
$int = $int+1;
}
echo <<<_END
</fieldset>
<script type="text/javascript" >
$(".checkbox-1").click(function(){
alert('clicked!');
});
</script>
</div>
_END;
Your jQuery is using a class selector, you need to update to it used an ID selector to match the output.
Replace
$(".checkbox-1").click
with
$("#checkbox-1").click