Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
On a form input, i am setting the value that i receive from server side. The form input can be again submitted, but if the user doesn't change the input i.e., replace the input and place the same value again, the form should not be validated and alerted to the user, that the same value cannot be set again.
--
Thanks
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.js"
type="text/javascript"></script>
<script>
$(function () {
var changeme = $('input[name=changeme]').val();
$.validator.addMethod("mustchange", function (value, element) {
if (value === changeme) {
return false;
}
else {
return true;
}
}, "you must change this value");
$('form').validate({ debug: true });
});
</script>
</head>
<body>
<form>
<div id="main">
<input name="changeme" type="text" value="My name is bob" class="mustchange" />
<br />
<input type="submit" />
</div>
</form>
</body>
</html>
Related
We have a set up with multiple forms on a single page. We are rendering each recaptcha successfully, however I'm struggling to invoke the recaptcha challenge programatically targeted to an ID.
Looking at the docs (https://developers.google.com/recaptcha/docs/invisible#programmatic_execute) my understanding is that I can pass an ID with the execute command so the response is filled into g-response within the correct form, otherwise the response defaults to the first g-response it finds on the page (which is no good for anything other than the first form on the page).
I've tried it with a slightly modified version of Googles own example, however we get the error message 'Invalid site key or not loaded in api.js: recaptcha123' even though the key is correct.
Does anyone have any idea how we might get this working?
<html>
<head>
<script>
function onSubmit(token) {
alert('thanks ' + document.getElementById('field').value);
}
function validate(event) {
event.preventDefault();
if (!document.getElementById('field').value) {
alert("You must add text to the required field");
} else {
grecaptcha.execute('recaptcha123');
}
}
function onload() {
var element = document.getElementById('submit');
element.onclick = validate;
}
</script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<form>
Name: (required) <input id="field" name="field">
<div id="recaptcha123" class="g-recaptcha"
data-sitekey="XXXXXXXXXXXXXXXX"
data-callback="onSubmit"
data-size="invisible"></div>
<button id="submit">submit</button>
</form>
<script>onload();</script>
</body>
</html>
The following code works:
<html>
<head>
<title>reCAPTCHA demo: Explicit render after an onload callback</title>
<script>
var onSubmit = function(token) {
console.log('success!');
};
var onloadCallback = function() {
widgetId1 = grecaptcha.render('recaptcha', {
'sitekey' : 'XXXXXXXXXXXXXXXXXX',
'callback' : onSubmit
});
};
</script>
</head>
<body>
<script src="/wp-content/themes/kc_water_care_services/js/pristine.min.js"></script>
<form action="?" method="POST" id="contactForm">
<div class="form-group">
<label for="name">Name (required)</label>
<input type="text" required data-pristine-required-message="Please enter your name"
id="name" name="name" />
</div><!--/.form-group-->
<div id="recaptcha" data-size="invisible"></div>
<input id="submit" type="submit" value="Submit">
</form>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer>
</script>
</body>
</html>
<script>
var form = document.getElementById("contactForm");
// create the pristine instance
var pristine = new Pristine(form);
form.addEventListener('submit', function (event) {
event.preventDefault();
// check if the form is valid
var valid = pristine.validate(); // returns true or false
if(valid == true){
grecaptcha.execute(widgetId1);
}
});
</script>
Turns out the id doesn't refer to the css ID, it refers to an ID created when you use the render function.
<!DOCTYPE html>
<head>
<meta charset=" UTF-8">
<title> Document</title>
</head>
<body id="chat">
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.5.0/socket.io.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
<form v-on="submit: send">
<input v-model="message">
<button>Send</button>
</form>
<script>
var socket = io();
new Vue({
el: '#chat',
date: {
message: ''
},
methods: {
send: function(e)
{
e.preventDefault();
alert("a");
}
}
})
</script>
</body>
I want to call the send method defined in new Vue when the form is submitted ,
But when i submit the form, page is reloading.
I have created a Vue object and linked it to the chat element.
I guess e.preventDefault() is not working.
Interesting, I just helped somebody with a similar issue, the syntax for Vue.2.0 is v-on:submit="send" not v-on="submit: send". Vue already has a way stop the form submitting which is: v-on:submit.prevent so you don't need the e.preventDefault, you would get:
<form v-on:submit="send" v-on:submit.prevent>
or a shorter version:
<form v-on:submit.prevent="send">
There are a few more issues here, so I will go through them for you:
Firstly, you are never submitting the form. To submit a form you need a submit input, not a button:
<input type="submit" value="Send" />
However, from what I can see it's likely you don't even need a form, and can simply use a button with v-on:click:
<div>
<input v-model="message">
<button v-on:click="send">Send</button>
</div>
And then get what was submitted from the view model:
send: function()
{
alert(this.message);
}
You should also use the console (under developer tools in your browser) and log any output rather than alert (console.log(this.message)), because it will also sniff out any general errors with your code - for example I can see that you also have a typo (the same one I always make) it's data not date:
data: {
message: ''
},
Okay, what about this
<form #submit.prevent="send">
<input v-model="message">
<button>Send</button>
</form>
And then you can remove preventing default browser action from your send() method
I am trying to send an xAPI statement after someone submits a their full name and email address through a form. In addition to sending the statement I would like to display a video.html page whereby they can watch a video. I know that there is an example of this on GitHub but I'm trying to do a much simpler example on my own. Can someone have a look at my attempt below and tell me why it is not working. Thanks very much.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/xapiwrapper.min.js"></script>
<script type="text/javascript">
var button = document.getElementById("theButton"),
fullName = button.form.fullNameID.value;
emailAddress = button.form.emailAddressID.value;
button.onclick = function() {
var stmt = new ADL.XAPIStatement(
new ADL.XAPIStatement.Agent(ADL.XAPIWrapper.hash('mailto:emailAddress'), 'fullName'),
new ADL.XAPIStatement.Verb('http://adlnet.gov/expapi/verbs/registered', 'registered'),
new ADL.XAPIStatement.Activity('act:http://ISO9000Video.html', 'Preparing for the ISO 9000 Audit',
'Preparation steps for the upcoming ISO 9000 audit.')
);
stmt.generateId();
stmt.addOtherContextActivity( new ADL.XAPIStatement.Activity('compId:internet_proficiency') );
stmt.generateRegistration();
ADL.XAPIWrapper.changeConfig({
'endpoint': 'https://lrs.adlnet.gov/xapi/',
'user': 'xapi-tools',
'password': 'xapi-tools',
});
ADL.XAPIWrapper.sendStatement(stmt);
var o = document.getElementById('output');
o.innerText = JSON.stringify(stmt, null, ' ');
}
</script>
</head>
<body>
<form id="frm1" action="">
Full Name: <input type="text" id="fullNameID" name="fullName"><br>
Email: <input type="text" id="emailAddressID" name="emailAddress"><br><br>
<input type="button" id="theButton" value="Submit">
</form>
<p>
<code><pre id='output'></pre></code>
</p>
</body>
</html>
Your script at the top of the page is being executed when the page loads, but the form element with the button hasn't been set as the property of the button yet because that part of the DOM hasn't been parsed. If you check the console in your browser you'll see an error such as:
Uncaught TypeError: Cannot read property 'form' of null
Move the <script> block that is currently in the <head> to the bottom of the <body> and it should work.
My code problem is that the input field for user name still accepts digits .
I tried to validate it with match() and (else if) but still not working.
The execution jumps to the (else) line.
please any help will be appreciated.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Functions in JS</title>
<script language="Javascript">
function showName() {
var entered=document.getElementById("name1").value;
var patt1 =/\[0-9]/g;
if( entered !==''){
document.getElementById("demo").innerHTML= entered;
}
else if( entered.match(patt1) ){
document.getElementById("demo").innerHTML="please enter a valid value";
}
else{
document.getElementById("demo").innerHTML="please enter value";
}
}
</script>
</head>
<body>
<form>
<label>Name:</label>
<input type="text" name="name1" id="name1" title="Only Alphabets" >
</form>
<input type="submit" onClick="showName();" >
<p><span id="demo"></span></p>
</body>
</html>
You have to test() your input against the pattern. From w3schools:
The test() method tests for a match in a string.
This method returns true if it finds a match, otherwise it returns
false.
<script language="Javascript">
function showName() {
var entered = document.getElementById("name1").value;
var pattern = /[0-9]+$/;
if(entered == ""){
document.getElementById("demo").innerHTML="Please enter a value";
} else if(pattern.test(entered)){
document.getElementById("demo").innerHTML="Please enter a valid value";
} else {
document.getElementById("demo").innerHTML=entered;
}
}
</script>
In my solution I'm only looking for two exceptions: No input and input contains a number. Everything else is allowed. You might need to change it to your needs :)
function showName() {
var entered=document.getElementById("name1").value;
var patt1 =/[0-9]+$/;
if(entered.match(patt1) ){
document.getElementById("demo").innerHTML='please enter a valid value '
}
else{
document.getElementById("demo").innerHTML= entered;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Functions in JS</title>
<script language="Javascript">
</script>
</head>
<body>
<form>
<label>Name:</label>
<input type="text" name="name1" id="name1" title="Only Alphabets" >
</form>
<input type="submit" onClick="showName();" >
<p><span id="demo"></span></p>
https://plnkr.co/edit/j39qy0aXOlfhkCW8upVL?p=preview
I am using jquery validation engine in my project on the input fields.
The code structure is like this
<form>
<input/>
<input/>
</form>
and i validate the fields in keyUp.
Now how do i show the prompt only on the input that has a focus.
or in otherwise how do i validate a single input element that has focus inside a particular form as the validation engine is attached to the form..
I use JavaScript-MVC framework
Please do help me. Thanks in advance
To validate a single input element that has focus inside a particular form on keyup try this
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.10.0/jquery.validate.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('form').validate({ onkeyup: false });
$('form').bind('keyup', function () {
$(':focus', this).valid();
});
});
</script>
</head>
<body>
<form>
<input name="one" class="required number"/><br />
<input name="two" class="required" /><br />
<input type="submit" />
</form>
</body>
</html>