I am using formspree for a contact sheet on my site, and I am wondering if there is a way to use javascript to block profanity from being sent on the sheet, or a way to block specific words at all. The code I have is super basic so far:
<label>
Your name:
<input type="name" name="Name">
</label>
<label>
Your email:
<input type="text" name="Email">
</label>
<label>
Your message:
<textarea name="message"></textarea>
</label>
<button type="submit">Send</button>
Ideally I would want to be able to block profanity on the Your Message area. I know you can do this on formspree if you have a premium account but I am wondering if there's anyway I can do it within the code. Thank you!
You can make JS code which will work onchange of your message, if last symbol isn't letter (word is finished)read it and if it find some bad word delete it. Also you can use JQuery or write that yourself.
Also JQuery word filter
Jquery page with that function
I gave it a go using Vanilla JavaScript, but I'm not too sure if this is what you wanted. Either way, hope it helps:
<!DOCTYPE html>
<html>
<body>
<label>
Your name:
<input type="name" name="Name">
</label>
<label>
Your email:
<input type="text" name="Email">
</label>
<label>
Your message:
<textarea id="msg" name="message" ></textarea>
</label>
<button onclick="check()" type="submit">Send</button>
<script>
function check() {
const black_list = ["Pineapple Pizza"];
var description = document.getElementById("msg").value;
console.log(description);
let profane = black_list.some(word => description.includes(word));
console.log(profane);
}
</script>
</body>
</html>
Related
I am not web developer, but I have a task to add autocomplete function for an input box. Please treat me as a very beginner.
<div>
<label id="email_label" for="send_email" style="padding-right:5px">
Send Email:
</label>
<input id="send_email" type="text" placeholder="e.g. xx.yy#zz.com" />
<button id="ack" onclick="requestAck()">
Request
</button>
</div>
requestAck() is a javascript function sending a email to address given by user (i.e. address in <input >). I am trying to add a flag in <input autocomplete="on" ...>, but it doesn't work. Perhaps because it's not in a <form></form> environment.
Could you help me to modify this code adding autocomplete (from cache) without changing other functions. Many thanks!
Try setting the property name="email" on the input tag, without that set the browser doesn't know what's supposed to autocomplete the field with :)
protip: I warmly suggest you to set the type of the input to email with type="email" instead of text, it's not required but it will help validating the input!
check this code:
<div>
<label id="email_label" for="send_email" style="paddingright:5px">Send Email:</label>
<input id="send_email" type="email" name="email" placeholder="e.g. xx.yy#zz.com" />
<button id="ack" onclick="requestAck()">Request</button>
</div>
EDIT: Final solution discussed in comments
<form onsubmit="submitForm(event)">
<label id="email_label" for="send_email" style="padding-right:5px">Send Email:</label>
<input id="send_email" type="email" autocomplete="email" name="email" placeholder="e.g. xx.yy#zz.com" />
<button id="ack" type="submit">Request</button>
</form>
<script>
function submitForm(e) {
e.preventDefault(); // this prevents the page from reloading
requestAck();
}
//dummy function so the javascript won't crash:
function requestAck() {}
</script>
Working example: https://codesandbox.io/s/focused-cray-ubkw4
Please help me, I stuck at likely simple task. I'm learning to webdriverjs , so I wrote a small code to register an account on FitBit site at url: www.fitbit.com/signup, after input my email and password, there is an div popup show up and ask user to fill all required field. Problem comes here, I cannot 'sendkeys' or 'click' on First Name field, could you please help me out?
my code is very simple:
const webdriver = require('selenium-webdriver');
const driver = new webdriver.Builder()
.forBrowser('firefox')
.build();
const By = webdriver.By;
// ask the browser to open a page
driver.navigate().to('https://www.fitbit.com/signup');
//Enter Email
driver.findElement(By.className('field email')).sendKeys('thisisatest#yopmail.com');
//Enter Password
driver.findElement(By.className('field password')).sendKeys('Abcd1234');
//Check check box
driver.findElement(By.id('termsPrivacyConnected')).click();
//Click Continue button
driver.findElement(By.xpath("//button[#type='submit' and #tabindex='16']")).click();
//Input First Name
driver.sleep(3000);
driver.findElement(By.xpath('//input[#id="firstName"]')).click();
driver.findElement(By.xpath('//input[#id="firstName"]')).sendKeys('why not input');
Depending on if this is a popup, a frame or another window you need a different SwitchTo() command. See: http://toolsqa.com/selenium-webdriver/switch-commands/ or here: http://learn-automation.com/handle-frames-in-selenium/
Now you added your HTML it is clear that that you don't have to Switch to fill in the popup fields. I translated your code to C# and use Chromedriver instead of Firefox and there where no problems filling in the Firstname and Lastname. So basicly nothing is wrong with your code.
Are you getting any error messages?
There is no window here, that's a tag, I posted its source code here for your reference
<section class="wrapper profile common-form">
<div class="panel panel-profile">
<h1 class="headline">
Tell Us About Yourself
</h1>
<p class="explain">
We use this information to improve accuracy.
</p>
<form method="post" autocomplete="off" name="completeProfile" action="https://www.fitbit.com/user/profile/complete" id="completeProfile" class="form">
<input name="_eventName" type="hidden" value="signupAndCompleteProfile" />
<input name="redirect" type="hidden" value="" />
<input name="csrfToken" type="hidden" value="84764c8b4da04c85a4541e49947240d0" />
<fieldset class="info-personal">
<dl class="field-group">
<dd class="left-cell">
<label class="field-label">
Name
</label>
<input autocomplete="off" tabindex="1" name="firstName" id="firstName" placeholder="First Name" type="text" class="field firstName" />
</dd>
<dd class="right-cell">
<label class="field-label"> </label>
<input autocomplete="off" tabindex="1" name="lastName" id="lastName" placeholder="Last Name" type="text" class="field lastName" />
</dd>
</dl>
<div class="clear"></div>
</fieldset>
</section>
I want to put an HTML form on my website for people to send in their RSVP to a party invite. I want to require them to put in a passcode (that will be printed on their invite) before they can submit the form. Is there a way to set a field requirement to an exact match of a pre-specified pin # or password using purely HTML (and JavaScript if necessary)?
For sake of an example, let's simply say I want the person's name and a yes or no for their RSVP.
<form>
Name:
<input type="text" name="name">
RSVP:
<input type="radio" name="rsvp" value="yes">Yes<br>
<input type="radio" name="rsvp" value="no" checked>No<br>
Secret Word:
<input type="password" name="secretWord">
</form>
Yes, you would have to use Javascript, so you would want
function check(){
var pass = document.getElementById("pass_box").value;
if(pass == "Y o u r p a s s w o r d"){
// Do stuff
}else{
// Dont do stuff
}
}
and your html code would look like this:
<form>
Name:
<input type="text" name="name">
RSVP:
<input type="radio" name="rsvp" value="yes">Yes<br>
<input type="radio" name="rsvp" value="no" checked>No<br>
Secret Word:
<input type="password" id="pass_box" name="secretWord">
<button onclick="check()">Submit</button>
</form>
But this isnt very secure, because someone could just look at your code and see the password, but if its just for a party, it should be fine!
Anyway, there is your code! Hope this helps!
I'm using JQuery Steps and I'm trying to make the last step verify what the user has put in throughout the previous steps. But the problem is that its not populating the labels with the values of the previous text boxes.
This is really confusing me because i have seen many working examples on this, but mine doesn't work? Any ideas? Am i missing something?
HTML
<label for="firstName">First Name *</label>
<input id="firstName" name="firstName" type="text">
<label for="lastname">last Name *</label>
<input id="lastname" name="lastname" type="text">
<br/><br/>
<label for="shippingaddress">Shipping Address *</label>
<input id="shippingaddress" name="shippingaddress" type="text">
<br/><hr><br/>
<p>
Name: <label id="vname"></label>
</p>
<p>
Shipping Address: <label id="vsaddress"></label>
</p>
JAVASCRIPT
$("#firstName,#lastname").change(function () {
var firstnameLAstName = $("#firstName").val()+ " " + $("#lastname").val();
$("#vname").text(firstnameLAstName);
});
$("#shippingaddress").change(function () {
var shippingAddress = $("#shippingaddress").val();
$("#vsaddress").text(shippingAddress);
});
here is my jsfiddle:
https://jsfiddle.net/7say10d8/4/
i even tried adding something to OnChanging
Remember import Jquery
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
its working https://jsfiddle.net/cmedina/7say10d8/5/
Thanks to having to work so much, I am completely confused on JavaScript. I have tried so many things and have not gotten my form to validate even once. I have to use plain JavaScript to:
**Validate the email - the email must have # and the domain should be yahoo.com
Phone No.: Must contain exactly 10 digits
Age: Must be a positive number less than 120
The validation should happen when the user submits the form. In case any of the above validation fails, the corresponding fields should be highlighted in red
If the validation is successful, the page should redirect to http://yahoo.com**
I'm not looking for someone to necessarily give me the exact answer, but push me in the right direction, because I do have a basic understanding of JS.
<!DOCTYPE HTML>
<div id="form">
<form name="myForm" action="http://fsu.edu" onsubmit="return validateForm()" method="post">
<head>
<link rel="stylesheet" HREF="C:\Users\Neshia\Desktop\CGS3066\Form Validation Style Sheet.css" TYPE="text/css">
<script>
function ValidatemyForm()
{
var email = document.myForm.email;
var phone = document.myForm.phonenumber;
var age = document.myForm.age;
}
{
age = age.replace(/[^0-9]/g, '');
if(age.length != 10)
{
alert("not 10 digits");
}
else {
alert("yep, its 10 digits");
}
}
</script>
</head>
<div id="header">
<hr id="HR1">
<h1> Web Programming: Assignment 3 </h1>
<p> Form Validation with Javascript </p>
<hr id="HR2">
</div>
<div id="input">
First name: <br>
<input type="text" name="firstname">
<br>
Last name: <br>
<input type="text" name="lastname">
<br>
FSU Email: <br>
<input type= "text" name="email">
<br>
Phone No.: <br>
<input type="numbers" name="phonenumber">
<br>
Age: <br>
<input type="numbers" name="age">
</div>
<hr id="HR3">
<br>
<div id="Sex">
Sex: <br>
<input type="radio" name="sex" value="male"> Male
<br>
<input type="radio" name="sex" value="female"> Female
<br>
<input type="radio" name="sex" value="other"> Other
</div>
<hr id="HR32">
<div id="languages">
Programming languages you want to learn: <br>
<input type="checkbox" name="python" value="python"> Python
<br>
<input type="checkbox" name="java" value="java"> Javascript
<br>
<input type="checkbox" name="C++" value="C++"> C++
<br>
<input type="checkbox" name="lisp" valie="lisp"> Lisp
</div>
<hr id="HR32">
<div id="submit">
<input type="Submit" value="Submit">
</div>
<hr id="HR12">
</form>
</div>
Aneshia,
You have a few problems. First the function listed in the "onsubmit" attribute of your form does not match your javascript function. Also there are some problems with your {} braces. After you get that fixed be sure to call .value after your form elements to get the value of the input ie. (document.myForm.email.value).
Here is the code with some fixes:
<form name="myForm" onsubmit="return validateForm()" method="post">
<head>
<link rel="stylesheet" HREF="C:\Users\Neshia\Desktop\CGS3066\Form Validation Style Sheet.css" TYPE="text/css">
<script>
function validateForm() {
var email = document.myForm.email.value;
var phone = document.myForm.phonenumber.value;
var age = document.myForm.age.value;
console.log(age)
var okToSubmit = true;
age = age.replace(/[^0-9]/g, '');
if (age.length != 10) {
alert("not 10 digits");
okToSubmit = false;
} else {
alert("yep, its 10 digits");
}
if (age > 120 || age < 0) {
alert("Must be a positive number less than 120");
okToSubmit = false;
}
return okToSubmit;
}
Another thing that may help is to bring up the javascript console in your browser and run your function manually in the console by typeing 'validateForm();'
You may be intrigued to note that html5 now validates some of these forms so you do not need to use Javascript.
See HTML Form Validation
You asked about email, age and phone.
Consider the following examples::
<form>
<input type="email" name="email" pattern=".*#yahoo\.com"> <br>
<input type="number" min="18" max="120" name="age"> <br>
<input type="tel" name="phonenumber"> <br>
<input type='submit'>
</form>
If you want the fields to be required you could use
<form>
<input type="email" name="email" pattern=".*#yahoo\.com" required> <br>
<input type="number" min="18" max="120" name="age" required> <br>
<input type="tel" name="phonenumber" required> <br>
<input type='submit'>
</form>
See http://diveintohtml5.info/forms.html
In your comments a few days later, you mentioned needing to do this in Javascript. I think the best way is still using HTML5 and a clever way to do this if you have to use javascript might be to set the input attributes through javascript. Something like this could get you started on the logic.
While I generally do not like getting this specific in the code, I commented things so you can get a general feel for how you can work with data in javascript.
function validate(event){
// First we stop the form from even submitting until we run the code below
event.stopPropagation();
// Here we are going to place a reference to the objects we want to validate in an array
var references = ['email','age','phonenumber'];
// Now we are going to grab our list of inputs from the page
var inputs = document.getElementsByTagName('input');
// We run through a for loop to look for specific elements
for(i = 0; i < inputs.length; i++){
/*
This line simply asks, is the 'name' of this element inside our references array.
This works by using the indexOf function which is built into Javascript.
indexOf simply provides the index where it finds the phrase you are looking for.
In this example, we are using it to see if an index exists by checking it against negative 1
*/
if(references.indexOf(inputs[i].getAttribute('name')) > -1){
// A switch block lets you present a different outcome based on the criteria being looked for
switch(inputs[i].getAttribute('name')){
// In this case we see if we get an email named element
case 'email':
// We set the attributes to match our requirements for this email element and so on through this switch block for age and phonennumber
inputs[i].setAttribute('type','email');
inputs[i].setAttribute('pattern','.*#yahoo\.com');
break;
case 'age':
inputs[i].setAttribute('type','number');
inputs[i].setAttribute('min',18);
inputs[i].setAttribute('max',120);
break;
case 'phonenumber':
inputs[i].setAttribute('type','tel');
break;
}
// When we are all done, we set the elements to be required
inputs[i].setAttribute('required',true);
}
}
// Now we submit the form
event.submit();
}
<form>
<input type="text" name="email"> <br>
<input type="text" name="age"> <br>
<input type="text" name="phonenumber"> <br>
<input type='submit' onclick='validate(event)'>
</form>
<input type='text' id='txtEmail'/>
<input type='submit' name='submit' onclick='Javascript:checkEmail();'/>
<script language="javascript">
function checkEmail() {
var email = document.getElementById('txtEmail');
var filter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!filter.test(email.value)) {
alert('Please provide a valid email address');
email.focus;
return false;
}
}
</script>