I have textbox and i want to replace the value % of textbox with - on form submit using jquery. But not getting how can i do it.
Here is my HTML
<form [formGroup]="form" id="form" (submit)="addDetails();form.reset()" class="form-style-9" ngNativeValidate>
<div class="form-group">
<div class="col-sm-4">
<label for="username">User Name</label></div>
<div class="col-sm-8"><input type="text" id="username" class="form-control"
placeholder="Please Enter User Name" formControlName="username" required="true">
</div>
<input type="hidden" id="usernameX" name="username" />
</div>
<input type="submit">
</form>
JS
var doReplace = function(string){
return string.replace(/%/g, "-");
}
var $usernameX = $('#usernameX');
$("#form").on("submit", function(e) {
$usernameX.val(doReplace($('#username').val()));
e.preventDefault();
});
You can do it like this. But you don't need jQuery for this:
<form [formGroup]="form" id="form" (submit)="onSubmit()" class="form-style-9" ngNativeValidate>
<div class="form-group">
<div class="col-sm-4">
<label for="username">User Name</label>
</div>
<div class="col-sm-8">
<input type="text" id="username" class="form-control" placeholder="Please Enter User Name" formControlName="username"
required="true">
</div>
<input type="hidden" id="usernameX" name="username" />
</div>
<input type="submit">
</form>
And add a onSubmit() to the component.ts:
public onSubmit(): void {
this.addDetails();
const value = this.form.get('username').value.replace(new RegExp('%'), '-');'
this.form.reset();
}
var myStr = 'replace_underscore_by_minus';
var newStr = myStr.replace(/_/g, "-");
Related
I want to add some html elements dynamically using jQuery inside a form tag but it is not working .
$(document).ready(function() {
var requirements = 0;
var container = $(document.createElement('div').addClass('form-group'));
$('#add-req').click(function() {
if (requirements <= 15) {
requirements = requirements + 1;
$(container).append('<input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required="">');
$('#requirement-div').after(container);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="register-form pt-md-4" id="requirement-div">
<form action="#" method="post">
<div class="styled-input form-group">
<input type="text" class="form-control" placeholder="Your Name" name="Course name" required="">
</div>
<div class="styled-input">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Requirement" title="Please enter requirement" required="">
</div>
<input type="button" value="add Requirements" id="add-req">
<input type="submit" value="Submit">
</div>
</form>
</div>
when I click add requirement button it should create another div tag and input element inside form element.
Just replace the code $(document.createElement('div').addClass('form-group')); to $(document.createElement('div')).addClass('form-group');
Try the following
We can directly Insert a html element to the targer Element as follow
$(document).ready(function(){
var requirements=0;
$('#add-req').click(function(){
if(requirements<=15){
requirements=requirements+1;
$('#requirement-div').after('<div class="form-group"><input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required=""></div>');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="register-form pt-md-4" id="requirement-div">
<form action="#" method="post" >
<div class="styled-input form-group">
<input type="text" class="form-control" placeholder="Your Name" name="Course name" required="">
</div>
<div class="styled-input">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Requirement" title="Please enter requirement" required="">
</div>
<input type="button" value="add Requirements" id="add-req">
<input type="submit" value="Submit">
</div>
</form>
</div>
you mixing between JS and JQuery, where document.createElemet('div') is a JS function while addClass is a JQuery function.
$(document).ready(function(){
var requirements = 0;
var container=$('<div>').addClass('form-group');
$('#add-req').click(function(){
if(requirements<=15){
requirements=requirements+1;
container.append('<input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required="">');
$(this).before(container);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="register-form pt-md-4" id="requirement-div">
<form action="#" method="post" >
<div class="styled-input form-group">
<input type="text" class="form-control" placeholder="Your Name" name="Course name" required="">
</div>
<div class="styled-input">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Requirement" title="Please enter requirement" required="">
</div>
<input type="button" value="add Requirements" id="add-req">
<input type="submit" value="Submit">
</div>
</form>
</div>
Replace the Below Code
<script>
$(document).ready(function(){
var requirements=0;
var container=$(document.createElement('div')).addClass('form-group');
$('#add-req').click(function(){
if(requirements<=15){
requirements=requirements+1;
$(container).append('<input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required="">');
$('#requirement-div').after(container);
}
});
});
</script>
I wrote a script here (Adding html elements dynamically using jquery) that you can test
<form action="#" method="post">
<div class="form-group">
<input type="text" class="form-control test" placeholder="Your Name" name="Course name" required="">
</div>
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Requirement" title="Please enter requirement" required="">
</div>
<div class="styled-input">
<input type="button" class="btn btn-primary" value="Add Requirements" id="add-req">
<input type="submit" class="btn btn-primary" value="Submit">
</div>
</form>
JQuery Code
$(function() {
var requirements=0;
$('#add-req').click(function(e){
e.preventDefault();
$('.test').val('Okay');
if(requirements <= 15) {
$('.styled-input').prepend('<div class="form-group"><input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required=""></div>');
requirements++;
} else {
alert('Max requirement has been reached');
}
});
});
I am trying to make a sign up form with javascript validation but the error message only flashes for a second.
I tried searching other similar questions but I couldn't find the answer...
This is my form code
<form method="post" name="signupForm">
<div id="signup-form" class="col-md-12 col-sm-12 col-xs-12">
<span id="error"></span>
<div class="form-group" id="inputFirst">
<label for="firstname">First Name:</label>
<input class="form-control" type="text" name="first_name" id="firstname" placeholder="John" value="">
</div>
<div class="form-group" id="inputLast">
<label for="lastname">Last Name:</label>
<input class="form-control" type="text" name="last_name" id="lastname" placeholder="Doe" value="">
</div>
<div class="form-group" id="inputEmail">
<label for="signup_email">Email Address:</label>
<input class="form-control" type="email" id="signup_email" name="email" placeholder="example#gmail.com" value="">
</div>
<div class="form-group" id="inputPassword">
<label for="user_password">Password:</label>
<input class="form-control" type="password" id="user_password" name="password" placeholder="Create a Password">
</div>
<button type="submit" onclick="validateForm()" class="btn button">Sign Up</button>
</div>
</form>
And this is my Validation Function
function validateForm() {
var first= document.forms["signupForm"]["firstname"].value;
var last = document.forms["signupForm"]["lastname"].value;
var email= document.forms["signupForm"]["email"].value;
var pass = document.forms["signupForm"]["password"].value;
var msg = "";
var valid= true;
checkname = /[A-z]/;
checkemail= /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*#(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
if(!/\w/.test(pass))
{
msg="Password can only contain [a-z, A-Z, 0-9, _ (underscore)]";
valid= false;
}
if(!checkemail.test(email))
{
msg="Email address Invalid";
valid= false;
}
if(!checkname.test(first))
{
msg="First and Last Name can only contain alphabets";
valid= false;
}
if(first==="" && last==="" && email==="" && pass==="")
{
msg="Please fill every field given below";
valid= false;
}
document.getElementById("error").innerHTML = msg;
return valid;
}
You should use return validateForm(), this way when the validateForm will return false - it will stop the form from submitting.
function validateForm() {
var first= document.forms["signupForm"]["firstname"].value;
var last = document.forms["signupForm"]["lastname"].value;
var email= document.forms["signupForm"]["email"].value;
var pass = document.forms["signupForm"]["password"].value;
var msg = "";
var valid= true;
debugger;
checkname = /[A-z]/;
checkemail= /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*#(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
if(!/\w/.test(pass))
{
msg="Password can only contain [a-z, A-Z, 0-9, _ (underscore)]";
valid= false;
}
if(!checkemail.test(email))
{
msg="Email address Invalid";
valid= false;
}
if(!checkname.test(first))
{
msg="First and Last Name can only contain alphabets";
valid= false;
}
if(first==="" && last==="" && email==="" && pass==="")
{
msg="Please fill every field given below";
valid= false;
}
document.getElementById("error").innerHTML = msg;
return valid;
}
<form method="post" name="signupForm">
<div id="signup-form" class="col-md-12 col-sm-12 col-xs-12">
<span id="error"></span>
<div class="form-group" id="inputFirst">
<label for="firstname">First Name:</label>
<input class="form-control" type="text" name="first_name" id="firstname" placeholder="John" value="">
</div>
<div class="form-group" id="inputLast">
<label for="lastname">Last Name:</label>
<input class="form-control" type="text" name="last_name" id="lastname" placeholder="Doe" value="">
</div>
<div class="form-group" id="inputEmail">
<label for="signup_email">Email Address:</label>
<input class="form-control" type="email" id="signup_email" name="email" placeholder="example#gmail.com" value="">
</div>
<div class="form-group" id="inputPassword">
<label for="user_password">Password:</label>
<input class="form-control" type="password" id="user_password" name="password" placeholder="Create a Password">
</div>
<button type="submit" onclick="return validateForm()" class="btn button">Sign Up</button>
</div>
</form>
Your form is probably still be submitting as you are not stopping the form submission. Your event handler is "onClick" on the submit button. This not necessarily stop the form.
You only see the error message for a split second because the page does a full page reload.
Your validation function should be bound to the "onSubmit" event instead.
<form onsubmit="return validateForm();">
I have 4 text fields.If I have entered any data in these text fields,these values stored in my database using ajaxcall. I want to know how to validate these fields.My code is not works
$(document).ready(function()
{
function validateform(){
var name=document.regform.emailid.value;
var password=document.regform.passWord.value;
if (name==null || name==""){
alert("Name can't be blank");
return false;
}
else if(password.length<6){
alert("Password must be at least 6 characters long.");
return false;
}
}
<form class="text-center" style="width:90%;padding-left:25px" name="regform" onsubmit="return validateform()" >
<div class="form-group">
<input type="text" class="form-control" id="firstName" placeholder="firstName" name="firstName">
</div>
<div class="form-group">
<input type="text" class="form-control" id="lastName" placeholder="lastName">
</div>
<div class="form-group">
<input type="text" class="form-control" id="emailid" placeholder="emailid" name="emailid" >
</div>
<div class="form-group">
<input type="text" class="form-control" id="passWord" placeholder="passWord" name="passWord">
</div>
<div class="form-group">
<input type="text" class="form-control" id="mobileNo" placeholder="mobileNo">
</div>
<button type="submit" class="btn btn-success btn-block" id="submitID">SUBMIT</button>
please correct my code?
$.post('url',{'send_post_var':'some_data'},function(result){});
This is some code for a 'Signup' html page; i'm having trouble getting it to check if the two passwords match though. If they don't match, I need a pop up box to display "try again"; if they do math, the page can continue as normal (The sumbit button goes to the home page of my website).
Thanks!!! I've written a javascript function near the bottom....
<form class="form-horizontal" role="form" method="post" action="index.php">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" name="email" placeholder="example#domain.com" value="">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Create a password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password1" name="password" placeholder="Your Password Here" value="">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Confirm password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password2" name="password" placeholder="Confirm Password" value="">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input id="submit" name="signup" type="submit" value="Sign Up" class="btn btn-primary" onclick="checkPassword()">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<! Will be used to display an alert to the user>
<script>
function checkPassword{
var1 = document.getElementById("password1");
var2 = document.getElementById("password2");
var n = var1.localeCompare(var2)
if(n == 0){
return true;
alert("Passwords do not match, please try again!");
}
return false;
}
</script>
</div>
</div>
</form>
Changed your code slightly:
<form class="form-horizontal" role="form" method="post" onsubmit="return checkPassword();" action="index.php">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" name="email" placeholder="example#domain.com" value="">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Create a password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password1" name="password" placeholder="Your Password Here" value="">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Confirm password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password2" name="password" placeholder="Confirm Password" value="">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input id="submit" name="signup" type="submit" value="Sign Up" class="btn btn-primary" >
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
</div>
</div>
</form>
<script>
function checkPassword(){
var1 = document.getElementById("password1");
var2 = document.getElementById("password2");
if(var1.value != var2.value){
alert("Passwords do not match, please try again!");
return false;
}
else{
return true;
}
}
</script>
Please note your form tag has onsubmit event, which calls your javascript function(not submit button) this way you stop form from being submited if passwords don't match. Also in your javascript function notice how I display alert before returning false and modified code to compare element values not elements. This code is tested and works.
delete onclick="checkPassword()" from submit tag
and in form tag add
onsubmit="return checkPassword()"
var1 = document.getElementById("password1").value;
var2 = document.getElementById("password2").value;
Also n===0 means, it matches and alert after return statement won't work.
You are comparing the elements, not the values. Get the values from the elements:
var1 = document.getElementById("password1").value;
var2 = document.getElementById("password2").value;
Return false if you want to stop the submission, and show the message before calling return. The localeCompare method returns a non-zero value if the strings are different:
if(n != 0){
alert("Passwords do not match, please try again!");
return false;
}
return true;
Instead of using the click event on the button, use the submit event on the form:
<form class="form-horizontal" role="form" method="post" action="index.php" onsubmit="return checkPassword();">
First switch lines with return and alert.
var pw1 = document.getElementById("password1").value;
var pw2 = document.getElementById("password2").value;
if( pw1 !== pw2 )
{
alert("Passwords do not match, please try again!");
return true;
}
I took the value out of the input elements and compare them with !==. That means, the type of both variables must be equal and the text must also be not equal.
I am having trouble pinpointing why my javascript code is failing to validate the form on the bottom. Any help is appreciated. I'm new and learning when in comes to javascript.
Here's the javascript:
<script type="text/javascript" language="javascript">
function validate(){
//Initialize array
var field = new Array;
var field = [document.getElementById('first_name'),document.getElementById('last_name'),document.getElementById('address'),document.getElementById('eadress'),document.getElementById('city'),document.getElementById('state'),document.getElementById('telephone'),document.getElementById('comments')];
//Error tracker
var error = 0;
//Validation Loop
for (i=0;i<field.length;i++)
{
if (field[i].value == "")
{
error++;
}
}
//If no errors are present, submit
if (error == 0)
{
document.contact-form.submit();
}
//Else, display alert
else {
alert("One or more fields are empty.");
return false;
}
}
Here's the form:
<div id="registration">
<form action="" method="post" onsubmit="return validate();" id="contact-form">
<h2>Contact Us
</h2>
<div>
<label for="first_name">First Name:</label>
<input id="first_name" name="first_name" type="text" class="required" />
</div>
<div>
<label for="last_name">Last Name:</label>
<input id="last_name" name="last_name" type="text" class="required" />
</div>
<div>
<label for="address">Address:</label>
<input id="address" name="address" type="text" />
</div>
<div>
<label for="city">City:</label>
<input id="city" name="city" type="text" />
</div>
<div >
<label for="state">State:</label>
<input id="state" name="state" type="text" />
</div>
<div >
<label for="zip">Zip:</label>
<input id="zip" name="zip" type="text" />
</div>
<div>
<label for="eaddress">Email address:</label>
<input id="eaddress" name="eaddress" type="text" class="required"/>
</div>
<div>
<label for="telephone">Telephone:</label>
<input id="telephone" name="telephone" type="text" />
</div>
<div>
<label>Comments:</label>
<textarea rows="4" cols="4" name="comments" id="comments" ></textarea>
</div>
<div>
<label></label>
<input id="submit" type="submit" value="Submit" />
<input id="reset" type="reset" value="Reset" />
</div>
</form>
I just corrected your code. it seems that in the array you are asking for eadress and the field is eaddress with 2 d's
In the script, you misspelt eaddress as eadress :)
You misspelled one of the fields ids in your array definition document.getElementById('eadress') is eaddress in HTML id attribute