Any simple way to implement semantic-ui form validation with google recaptcha if the recaptcha field is checked or empty?
To expand on Arpit's answer:
Here's a non-Angular solution that worked for me
Custom validation rule above your fields validation:
$.fn.form.settings.rules.recaptchaValidate = function() {
return (recaptchaVerified);
};
Add this to your validation:
recaptcha: {
identifier: 'recaptcha',
rules: [
{
type: 'recaptchaValidate',
prompt: 'Please complete reCaptcha validation.'
}
]
}
and your HTML:
<div class="required field">
<div class="g-recaptcha" data-sitekey="{your key here}" data-callback="correctCaptcha"></div>
<input type="hidden" name="recaptcha" id="recaptch-validation">
</div>
[ ... then this just before closing body tag ... ]
<script type="text/javascript">
var recaptchaVerified = false;
var correctCaptcha = function(response) {
recaptchaVerified = true;
};
var expiredCaptcha = function() {
recaptchaVerified = false;
};
</script>
use below validation for Google reCaptcha validation.
Script:
$(document).ready(function () {
$('.ui.form').form({
recaptcha: {
identifier: 'g-recaptcha-response',
rules: [
{
type: 'empty',
prompt: 'Please complete reCaptcha validation.'
}
]
}
},
{
onSuccess: function (event, fields) {
console.log('Success:', fields);
return false;
//event.preventDefault();
},
onFailure: function (error) {
console.log('Failure',error);
return false;
}
});
});
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Self Registration Module</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script src="../../Content/Scripts/jquery.min.js"></script> <!-- version 3.0.0 ->
<script src="../../Content/semantic/semantic.min.js"></script>
<link href="../../Content/semantic/semantic.min.css" type="text/css" rel="stylesheet" class="ui" />
<script src="https://www.google.com/recaptcha/api.js?onload=vcRecaptchaApiLoaded&render=explicit" async defer></script>
</head>
<body ng-app="registrationApp">
<div class="ui container" lang="en"
<div class="ui attached message">
<div class="header">
Registation Form
</div>
<p>Fill out the form below to register user in rev</p>
</div>
<form class="ui form attached segment">
<div class="field">
<div vc-recaptcha
key="'6Lf4ax0UAAAAADWkffMAXBsFzx2dgkMMnqvw4tIE'"
ng-model="RecaptchaResponse">
</div>
</div>
</div>
</form>
</div>
</body>
</html>
Related
I created the main page that has 2 datepickers and 1 input mask for time. A button will trigger a GET request for a page with the same content to be loaded within a div. I have put all the js, CSS and function script on the main page.
At the main page, all the datepickers and input mask work correctly but the GET request got trigger and the new page is loaded, all the datepickers and input mask are not working.
Please help.
Date Picker and Input Mask Not Working
The MAIN PAGE Code
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- IN SUBFOLDER PLUGIN -->
<!-- Date Picker -->
<link rel="stylesheet" href="plugins/datepicker/datepicker3.css">
<!-- JQuery 2.2.3 Compressed -->
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- datepicker -->
<script src="plugins/datepicker/bootstrap-datepicker.js"></script>
<!-- InputMask -->
<script src="plugins/input-mask/jquery.inputmask.js"></script>
<script src="plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script src="plugins/input-mask/jquery.inputmask.extensions.js"></script>
</head>
<body>
<form name="form1">
<label>Date : </label>
<div>From :<input name="dt_DateFr" type="text" date-picker></div>
<div>To : <input name="dt_DateTo" type="text" date-picker></div>
<div>Time: <input id="txtOTOut" name="txtOTOut" type="text"
data-inputmask="'alias': 'hh:mm'" data-mask>
</div>
<button type="submit" id="btnShow" name="btnShow"
onclick="showContent();return false;">
Show</button>
</form>
<br />
<br />
<div id="content2" style="display: none">
<!-- CONTENT HERE -->
</div>
<script>
$(function () {
//Date picker
$("[date-picker]").datepicker({
format: "dd/mm/yyyy",
autoclose: true,
}).datepicker("setDate", new Date());
});
$(function () {
//Time mask
$("[data-mask]").inputmask();
});
$(function () {
$("#btnShow").click(function () {
$("#content2").show();
});
});
</script>
<script>
function showContent() {
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("content2").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "ax_test.asp?", true);
xhttp.send();
}
</script>
The GET REQUEST Page ax_test.asp
<form name="form2">
<label>Date : </label>
<div>From :<input name="dt_DateFr" type="text" date-picker></div>
<div>To : <input name="dt_DateTo" type="text" date-picker></div>
<div>Time: <input id="txtOTOut" name="txtOTOut" type="text"
data-inputmask="'alias': 'hh:mm'" data-mask>
</div>
</form>
Manage to get it working by including the jquery in the showContent()
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- ALL script in subfolder plugins -->
<!-- Date Picker -->
<link rel="stylesheet" href="plugins/datepicker/datepicker3.css">
<!-- JQuery 2.2.3 Compressed -->
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- datepicker -->
<script src="plugins/datepicker/bootstrap-datepicker.js"></script>
<!-- InputMask -->
<script src="plugins/input-mask/jquery.inputmask.js"></script>
<script src="plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script src="plugins/input-mask/jquery.inputmask.extensions.js"></script>
</head>
<body>
<form name="form1">
<label>Date : </label>
<div>From :<input name="dt_DateFr" type="text" date-picker></div>
<div>To : <input name="dt_DateTo" type="text" date-picker></div>
<div>Time: <input id="txtOTOut" name="txtOTOut" type="text"
data-inputmask="'alias': 'hh:mm'" data-mask>
</div>
<button type="submit" id="btnShow" name="btnShow"
onclick="showContent();return false;">
Show</button>
</form>
<br />
<br />
<div id="content2" style="display: none">
<!-- CONTENT HERE -->
</div>
<script>
$(function () {
//Date picker
$("[date-picker]").datepicker({
format: "dd/mm/yyyy",
autoclose: true,
}).datepicker("setDate", new Date());
});
$(function () {
//Time mask
$("[data-mask]").inputmask();
});
$(function () {
$("#btnShow").click(function () {
$("#content2").show();
});
});
</script>
<script>
function showContent() {
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("content2").innerHTML = xhttp.responseText;
$("[data-mask]").inputmask();
$("[date-picker]").datepicker({
format: "dd/mm/yyyy",
autoclose: true,
}).datepicker("setDate", new Date());
}
};
xhttp.open("GET", "ax_test.asp?", true);
xhttp.send();
}
</script>
</body>
</html>
I am new to AngularJS and i need your help. I have created a JSON file which consists of a list of items inside another list. I want to access the items in the second list but I don't know how. I have searched all day in the Internet but I hardly found anything useful. Please help me. Below is my code:
categoryItems.json
[
{
"$id":"1",
"name":"Business",
"cat":[
{
"cname":"CyberSecurity",
"img":"img3_1.jpg",
"cat_kurs":"7-course specialization",
"txt":"Rice University"
},
{
"cname":"Google Cloud Platform for Systems Operations",
"img":"img3_2.jpg",
"cat_kurs":"6-course specialization",
"txt":"University of California"
},
{
"cname":"Data Security",
"img":"img3_1.jpg",
"cat_kurs":"7-course specialization",
"txt":"Rice University"
}
]
},
{
"$id":"2",
"name":"Foreign Language",
"cat":[
{
"cname":"Data Security",
"img":"img3_1.jpg",
"cat_kurs":"7-course specialization",
"txt":"Rice University"
},
{
"cname":"Google Cloud",
"img":"img3_2.jpg",
"cat_kurs":"3-course specialization",
"txt":"University of California"
}
]
}
]
script.js
var myItemsApp = angular.module('myItemsApp', []);
myItemsApp.factory('itemsFactory', ['$http', function($http){
var itemsFactory ={
itemDetails: function() {
return $http(
{
url: "categoryItems.json",
method: "GET",
})
.then(function (response) {
return response.data;
angular.forEach(data.itemDetails, function(item) {
});
});
}
};
return itemsFactory;
}]);
myItemsApp.controller('ItemsController', ['$scope', 'itemsFactory', function($scope, itemsFactory){
var promise = itemsFactory.itemDetails();
promise.then(function (data) {
$scope.itemDetails = data;
console.log(data);
});
$scope.select = function(item) {
$scope.selected = item;
};
$scope.selected = {};
}]);
index.html
<!DOCTYPE html>
<html ng-app="myItemsApp">
<head>
<meta charset="utf-8" />
<title>Test</title>
<!-- <link data-require="bootstrap-css" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />-->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen" />
<link href="css/bootstrap-theme.min.css" rel="stylesheet" media="screen"/>
<script src="js/angular.min.js"></script>
<script src="js/angular.js"></script>
<script src="script.js"></script>
<style>
span.el{
background-color:#85929E;
font-size: xx-small;
font-color: #FDFEFE;
width: 60px;
}
span.txt{
font-size:xx-small;
}
div.cat{
background-color:#F2F3F4 ;
}
</style>
</head>
<body>
<div ng-controller="ItemsController">
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<ul class="list-group">
<a class="list-group-item" ng-click="select(item)" ng-repeat="item in itemDetails">{{item.name}}</a>
</ul>
</div>
</div>
<div class="col-md-8">
<div class="panel panel-default" style="width: 70%">
<div class="panel-heading">{{selected.name}}</div>
<div class="panel-body">
<div ng-repeat="subcat in item.cat ">
{{subcat.cname}}
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Please HELP ME.
Looks like you need todo another ng-repeat on the sub categories.
<div class="col-md-8" ng-show="selected.name.length">
<div class="panel panel-default" style="width: 70%">
<div class="panel-heading">{{selected.name}}</div>
<div class="panel-body">
<div ng-repeat="subcat in itemDetails | filter:{name:selected.name}">
<div ng-repeat="cat in subcat.cat">
{{cat.cname}}
</div>
</div>
</div>
</div>
Have a look at this example ive mocked up for you
You need to deserialize the response using angular.fromJson
more reference: https://docs.angularjs.org/api/ng/function/angular.fromJson
new to parse and react and I'm I'm getting this error
Uncaught Error: Parse Error: Line 50: Unexpected token
observe: function() {
How can I fix it ?
Here is my whole code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width">
<link href='http://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'>
<script src="http://fb.me/react-0.13.3.min.js"></script>
<script src="https://www.parsecdn.com/js/parse-latest.js"></script>
<!-- Now include parse-react.js -->
<script src="https://www.parsecdn.com/js/parse-react.js"></script>
</head>
<body>
<script src="./jquery.min.js"></script>
<script src="./jquery.velocity.min.js"></script>
<script src="./velocity.ui.min.js"></script>
<script src="./react.js"></script>
<script src="./JSXTransformer.js"></script>
<script type="text/jsx">
/** #jsx React.DOM */
var App = React.createClass({
render: function() {
var name=null;
var password=null;
var email=null;
return (
<div>
<label>Name</label>
<input type="text" ref="name" /><br/>
<label>Password</label>
<input type="password" ref="password" /><br/>
<label>Email</label>
<input type="email" ref="email" /><br/>
<button onClick={this.saveAndContinue}>
Save and Continue
</button>
</div>
)
},
saveAndContinue: function(e) {
e.preventDefault()
//debugger;
// Get values via this.refs
data = {
name: this.refs.name.getDOMNode().value,
password: this.refs.password.getDOMNode().value,
email: this.refs.email.getDOMNode().value,
}
//this.props.saveValues(data)
},
//this.props.nextStep()
saveValues: function()
{
return function()
{
mixins: [ParseReact.Mixin],
observe: function() {
return {
};
}
}
}
}
);
React.renderComponent(<App />, document.body);
</script>
</body>
</html>
Since I'm new to this so Any Help will be appreciated. Thanks
saveValues is a function that returns a function. Within the returned function body you seem to attempt to use object literal syntax.
function() {
a: "something",
b: "something else"
}
is not valid syntax. You probably mean to return some object.
I have searched this forum for answers and have tried different suggestions that worked for others but did not work for me - including adding the site address to the whitelist in config.xml.
I am working on developing a web app using HTML5, CSS and JavaScript with Cordova 3.5.0-0.2.6 and jQuery Mobile 1.4.3 for the UI. I am using a multi-page JQM page model with the need to make ajax request to submit forms to a server.
Testing the code on localhost works fine but when I build on Android platform in Cordova, the request is not even sent at all as I get the alert message I wrote for when the request is not sent ("Could not connect!").
The code is supposed to use the JSON object returned from the server to display the next page. My codes are as shown below:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="jquery.mobile.theme-1.4.3.min.css" />
<link rel="stylesheet" href="jquery.mobile-1.4.3.min.css" />
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).on("pageinit", function(){
$.mobile.allowCrossDomainPages = true;
$.support.cors = true;
});
</script>
<script type="text/javascript" src="jquery.mobile-1.4.3.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
</head>
<body>
<div data-role="page" id="login">
<script>
$(document).bind('mobileinit', '#login', function(){
$(function() {
$("#loginSubmit").on("click", function(e) {
e.preventDefault();
$.ajax({
url: "http://url-address.php",
type: "POST",
cache: false,
dataType: "json",
data: $("#loginForm").serialize(),
success: function(result){
if(result.status == "true")
{
alert('Login Successful! ' + result.user);
$.mobile.changePage("#play");
}
else if(result.status=="false")
{
alert('could not login');
}
},
error: function(){
alert('Could not connect!');
}
});
});
return false;
});
});
</script>
</div>
<div data-role="header">
<h1>App Login</h1>
</div>
<div role="main" class="ui-content">
<h4>New account? Sign Up now!</h4><hr>
<form id="loginForm">
<label for="text-basic">Email:</label>
<input type="text" name="email" id="email" value="">
<label for="text-basic">Password:</label>
<input type="password" name="password" id="password" value="">
<br>
<button type="submit" id="loginSubmit">Submit</button>
</form>
<strong>Forgot Password?</strong>
</div>
<div data-role="footer">
</div>
</div>
<!----------------- SECOND PAGE ---------------------->
<div data-role="page" id="plan">
<script>
$(document).on('pagebeforeshow', '#plan' ,function() {
//e.preventDefault();
$('#gamebuttons').empty();
$.ajax({
url: 'http://url-address.php',
dataType: 'json',
Cache: false,
success: function(data) {
$.each(data, function(i,item) {
$('#gamebuttons').append('<button type="button" class="ui-btn ui-btn-inline" name="plannumber" id="gamepanelbutton" value="'+item+'">' + item + '</button>');
});
$('#gamebuttons').refresh();
},
error: function(){
$('#gamebuttons').append('error importing data');
}
});
});
$(document).on("pageshow", "#plan", function(){
$(function(){
$("#playSubmit").on("click", function(e) {
e.preventDefault();
$.ajax({
url: "http://url-address.php",
data: $("#play").serialize(),
type: "POST",
cache: false,
dataType: "json",
data: {"am": am, "rl": rl},
//data: {action: 'login', formData: $('#submitForm').serialize()},
success: function(result){
if(result.status == "true") {
alert(result.message);
//$.mobile.changePage("#play");
} else if(result.status=="false") {
alert(result.message);
}
},
error: function() {
alert('Could not send play request: Error executing request!');
}
});
});
return false;
});
});
</script>
<div data-role="header">
<h1>Main page</h1>
Options
Help
</div>
<div role="main" class="ui-content">
<p>
</p>
<form id="play">
<!---the other form elements go here-->
<p>
<button type="submit" class="ui-btn ui-shadow" id="playSubmit">Play</button>
</p>
</form>
</div>
<div data-role="footer">
</div>
</div>
</body>
</html>
You should clean up your code and take care about indentation. I edited your first post with good indent. You will see that there is a that should not be here in your code, before the <div data-role="header"> of your 1st page:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="jquery.mobile.theme-1.4.3.min.css" />
<link rel="stylesheet" href="jquery.mobile-1.4.3.min.css" />
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).on("pageinit", function(){
$.mobile.allowCrossDomainPages = true;
$.support.cors = true;
});
</script>
<script type="text/javascript" src="jquery.mobile-1.4.3.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
</head>
<body>
<div data-role="page" id="login">
<script>
$(document).bind('mobileinit', '#login', function(){
$(function() {
$("#loginSubmit").on("click", function(e) {
e.preventDefault();
$.ajax({
url: "http://url-address.php",
type: "POST",
cache: false,
dataType: "json",
data: $("#loginForm").serialize(),
success: function(result){
if(result.status == "true")
{
alert('Login Successful! ' + result.user);
$.mobile.changePage("#play");
}
else if(result.status=="false")
{
alert('could not login');
}
},
error: function(){
alert('Could not connect!');
}
});
});
return false;
});
});
</script>
<div data-role="header">
<h1>App Login</h1>
</div>
<div role="main" class="ui-content">
<h4>New account? Sign Up now!</h4><hr>
<form id="loginForm">
<label for="text-basic">Email:</label>
<input type="text" name="email" id="email" value="">
<label for="text-basic">Password:</label>
<input type="password" name="password" id="password" value="">
<br>
<button type="submit" id="loginSubmit">Submit</button>
</form>
<strong>Forgot Password?</strong>
</div>
<div data-role="footer">
</div>
</div>
<!----------------- SECOND PAGE ---------------------->
<div data-role="page" id="plan">
<script>
$(document).on('pagebeforeshow', '#plan' ,function() {
//e.preventDefault();
$('#gamebuttons').empty();
$.ajax({
url: 'http://url-address.php',
dataType: 'json',
Cache: false,
success: function(data) {
$.each(data, function(i,item) {
$('#gamebuttons').append('<button type="button" class="ui-btn ui-btn-inline" name="plannumber" id="gamepanelbutton" value="'+item+'">' + item + '</button>');
});
$('#gamebuttons').refresh();
},
error: function(){
$('#gamebuttons').append('error importing data');
}
});
});
$(document).on("pageshow", "#plan", function(){
$(function(){
$("#playSubmit").on("click", function(e) {
e.preventDefault();
$.ajax({
url: "http://url-address.php",
data: $("#play").serialize(),
type: "POST",
cache: false,
dataType: "json",
data: {"am": am, "rl": rl},
//data: {action: 'login', formData: $('#submitForm').serialize()},
success: function(result){
if(result.status == "true") {
alert(result.message);
//$.mobile.changePage("#play");
} else if(result.status=="false") {
alert(result.message);
}
},
error: function() {
alert('Could not send play request: Error executing request!');
}
});
});
return false;
});
});
</script>
<div data-role="header">
<h1>Main page</h1>
Options
Help
</div>
<div role="main" class="ui-content">
<p>
</p>
<form id="play">
<!---the other form elements go here-->
<p>
<button type="submit" class="ui-btn ui-shadow" id="playSubmit">Play</button>
</p>
</form>
</div>
<div data-role="footer">
</div>
</div>
</body>
</html>
For your request problem, have you changed the URL to map the real server mapping?
This is the code I am using to add a comment using Ajax call.
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile- 1.1.0-rc.1.min.css" />
<script type="text/javascript" charset="utf-8" src="js/cordova-1.5.0.js">
</script>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<script src="js/global.js" type="text/javascript"></script>
</head>
<script>
var msgId = window.localStorage.getItem("clickedId");
processLogInData = function(){
var comment = ($("#comment").val());
temp = 'messageId=' + msgId +'&';
temp += 'uniqueId=' + device.uuid + '&';
temp += 'comments=' + comment;
var s= global1 +"rest/Comment/createCommentBO?"+temp;
$.ajax({
url:global1 +"rest/Comment/createCommentBO?",
data: temp,
dataType: 'xml',
timeout: 10000,
async: false,
cache: false,
type: 'POST',
success: function(data){
if($(data).find("isException").text() == "false")
{
//alert('No Exceptions found');
onTrue();
}
else
{
onFalse();
}
},
error:function(XMLHttpRequest,textStatus, errorThrown) {
// alert("Error status :"+textStatus);
// alert("Error type :"+errorThrown);
alert("Error message :"+XMLHttpRequest.responseXML);
$("#messagelist").append( XMLHttpRequest.responseXML);
}
});
}
function onTrue(){
location.replace("comments.html");
}
function onFalse()
{
console.log("onFalse Method");
alert("Unable to create Comment!");
}
function cancel(){
location.replace("comments.html");
}
</script>
<body>
<div data-role="page" data-theme="a">
<div data-theme="a" data-role="header">
<img src="images/logo_header.png" alt="Orange"/>
</div>
<div data-role="content">
<form method="post" name="login" data-ajax="false">
<label for="textarea"><h3><u>Add Comment</u> : </h3></label>
<textarea cols="15" rows="15" name="textarea" id="comment"></textarea>
</form>
<div>
<div class="ui-block-a"><button type="submit" data-theme="d" onclick="cancel();" data-mini="true" data-icon="delete">Cancel</button></div>
<div class="ui-block-b"><button type="submit" data-theme="a" onclick="processLogInData();" data-mini="true" data-icon="check" >Submit</button></div>
</div>
</div>
</div>
</body>
When I enter special character as content as pass it to Ajax call I am getting an error :( Ajax call works fine with out any special characters...
Is there any way to encode the data before passing it to ajax call???Please help me on this...
Thanks in advance.
(1.)Either you should put your data into a form and serialize it and then send to the server
(2.)Second way is you can use the js inbuilt function encodeURIComponent().