How to write validation for below code in jQuery? - javascript

Here, In my code First name and Last name fields placed side by side how to write a validation for that 2 fields i tried but am not getting correct.I attached image and my code below
jQuery code:
jQuery(function(){
jQuery("#fName").validate({
expression: "if (VAL.match(/^[a-zA-Z]{2,30}$/)) return true; else return false;",
message: "Please enter the First Name Last Name"
});
});
signup.html
<div class="form-fullname">
<input class ="first-name"type="text" id="fName" name="firstname" placeholder="First name" required="">
<input class="last-name" type="text" id="lName" name="lastname" placeholder="Last name" required="">
</div>
The full page is an error image.
Error:
in this signup form when am entered numbers in first name it should show error message at below, but it is showing beside first name as shown in picture. So can you tell me how can i get error message in below.

Try to add the regex on input tag Instead:
<form action="register_page">
<div class="form-fullname">
<input class ="first-name" type="text" id="fName" name="firstname" placeholder="First name" pattern="^\w{2,30}$" required>
<input class="last-name" type="text" id="lName" name="lastname" placeholder="Last name" pattern="^\w{2,30}$" required>
</div>
<input type="submit" value="Register">
</form>
Note that you can use \w on regex instead of [a-zA-Z]. This way you don't need jquery validation in this case.

You can use test function on the regular expression in JavaScript to know whether the input is in valid format.
Use css function to display or hide the error messages.
If you want to show error for first name field when last name field is focused you can write an on focus event in jQuery.
$(document).ready(function () {
var NAME_REGEX = /^[a-zA-Z]{2,30}$/;
$('#signupBtn').click(signupBtnClick);
$('input[name="lastname"]').focus(lastNameOnFocus);
function signupBtnClick() {
validateFirstName();
validateLastName();
}
function lastNameOnFocus() {
validateFirstName();
}
function validateFirstName() {
var firstName = $('input[name="firstname"]').val();
if(NAME_REGEX.test(firstName)) {
$('#firstnameerror').css('display', 'none');
} else {
$('#firstnameerror').css('display', 'block');
}
}
function validateLastName () {
var lastName = $('input[name="lastname"]').val();
if(NAME_REGEX.test(lastName)) {
$('#lastnameerror').css('display', 'none');
} else {
$('#lastnameerror').css('display', 'block');
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<h3>Sign Up</h3>
</div>
<div>
<input type="text" name="firstname" placeholder="First Name">
<span id="firstnameerror" style="color: red; display: none;">First Name is required</span>
</div>
<div style="margin-top: 1%;">
<input type="text" name="lastname" placeholder="Last Name">
<span id="lastnameerror" style="color: red; display: none;">Last Name is required</span>
</div>
<div style="margin-top: 2%;">
<button type="button" id="signupBtn">Submit</button>
</div>

Related

How to set field as required if value exist in other field?

I have first, last name, and email input fields. The requirement from the customer is to have email field required only if either first or last name value exist. If there is no value entered in either of those two fields email should not be required. I have developed this code that works assuming that form is always empty. The problem is the case when user already has data entered in there and user is loading the form. In that case my code is not useful. Here is working example of what I have so far.
$(".check").on("keyup blur", function() {
var fldVal = $(this).val();
if (fldVal) {
$("#email").closest("div").addClass("required");
$("#email").prop("required", true);
} else {
$("#email").closest("div").removeClass("required");
$("#email").prop("required", false);
}
});
.row {padding: 3px;}
.required label:after { content: " *"; color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="text" id="test">
<div class="row">
<label>First Name:</label>
<input type="text" name="first" id="first" class="check">
</div>
<div class="row">
<label>Last Name:</label>
<input type="text" name="last" id="last" class="check">
</div>
<div class="row">
<label>Email:</label>
<input type="email" name="email" id="email">
</div>
<button type="button" name="submit" id="submit">Submit</button>
</form>
I would like for my code to check all the requirements on page load. If possible that should all be done with one function. I can't think of a good way to achieve that. Please let me know if you have any ideas.

How do I add HTML form data to a mailto link

I am trying to create a form that allows the user to type their first and last name, then submit it. I want to take the first and last name they entered and put that data in a mailto link. The code below is what I have. What am I doing wrong?
<div class="form">
<form>
<input type="text" name="firstname" placeholder="First Name">
<input type="text" name="lastname" placeholder="Last Name">
<button type="submit" class="submit" onclick="submitForm()"><i class="material-icons md-24">play_circle_filled</i></button>
</form>
<script>
function submitForm{
var fname = get.getElementsByName("firstname").value;
var lname = get.getElementsByName("lastname").value;
window.open("mailto:someone#example.com?subject=Test%20Email&body=First%20Name:%20"+fname+"%20Last%20Name:"+lname"");
}
</script>
</div>
First, you forgot the parenthesis after the functions name (like Erl V stated).
Funktions always have these parentheses. You can use them, to give the functions parameters. Read more about functions here.
Second, you forgot a plus sign in the concatenated string of the window.open parameter.
I removed the last part, cause it was unnecessary.
Third, you was using get.getElementsByName("firstname").value instead of document.getElementsByName("firstname")[0].value.
This is tested and should work:
<form>
<input type="text" name="firstname" placeholder="First Name">
<input type="text" name="lastname" placeholder="Last Name">
<button type="submit" class="submit" onclick="submitForm()">Submit</button>
</form>
<script>
function submitForm(){
var fname = document.getElementsByName("firstname")[0].value;
var lname = document.getElementsByName("lastname")[0].value;
window.open("mailto:someone#example.com?subject=Test%20Email&body=First%20Name:%20"+fname+"%20Last%20Name:"+lname);
}
</script>
Try this
function submitForm(form) {
window.open("mailto:someone#example.com?subject=Test%20Email&body=First%20Name:%20" + form.firstname.value + "%20Last%20Name:" + form.lastname.value);
return false; /* cancel submit or else page reloads */
}
<form onsubmit="return submitForm(this);">
<input type="text" name="firstname" placeholder="First Name" />
<input type="text" name="lastname" placeholder="Last Name" />
<button type="submit" class="submit"><i class="material-icons md-24">play_circle_filled</i></button>
</form>
BTW, below are mistakes in your code.
:"+lname""); /*unwanted "" at the end*/
Here, you have multiple corrections:
get.getElementsByName("firstname").value
It is not get. instead it is document., also getElementsByName() will return you NodeList instead of just one HTML Element, so likewise you will need to use index, so you end up with document.getElementsByName("firstname")[0].value
Edited: Cleaned your javascript
function submitForm(){
var fname = document.getElementsByName("firstname").value;
var lname = document.getElementsByName("lastname").value;
window.open("mailto:someone#example.com?subject=Test%20Email&body=First%20Name:%20"+fname+"%20Last%20Name:"+lname);
}

Form validation message in JS

I have a problem with validation.
I wanted show text'fill the field' after every wrong fill input on submit. And I have a problem with validation email I dont have any idea how I should do this.
JS
function onclickHandler() {
var form = document.querySelector("#myForm"),
fields = form.querySelectorAll(".requiredField"),
error = form.querySelector(".error");
for (var i = 0; i < fields.length; i++) {
var field = fields[i];
if (field.value == "") {
error.innerHTML = '<p>Fill this field</p>';
} else {
console.log('ok');
error.remove();
}
}
}
HTML:
<div class="form-contact">
<div class="item">
<input type="text" placeholder="First Name*" >
<div class="error"></div>
</div>
<div class="item">
<input type="text" placeholder="Last Name*">
<div class="error"></div>
</div>
<div class="item">
<input type="text" placeholder="Email Address*" class="email">
<div class="error"></div>
</div>
</div>
Instead of going through the process of checking for empty boxes, use the HTML boolean attribute required.
<input type="text" placeholder="First Name" required/>
That will make sure the user cannot submit until all required marked input fields are filled out.
Also, to validate an email, there is an input type for that too.
<input type="email" placeholder="Email Address" class="email"/>
For more info on the email input type, check out https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email.
Hope this was helpful to you.

Populating error message with field name in Parsley js

I couldn't find anything in the Parsley docs or in Google.
Is there an easy way to set an attribute in input and populate the error message with custom message.
For example:
<label>First name
<input type="text" required/>
</label>
with give a standard error "This value is required."
But it would be nice to have something like
<label>First name
<input type="text" required data-parsley-field-name="Last name"/>
</label>
with error like "Last name is required"
Or as an option, just grad string from<label>.
I know that I can set custom messages, but you have to do it on each input.
This will your job
<form method="post" id="myForm">
<input type="text" name="phone" class="form" data-err="last name" value="" class="required" data-parsley-required="" />
<input type="text" name="phone" class="form" data-err="First name" value="" class="required" data-parsley-required="" />
<input type="submit" value="Go">
$(document).ready(function() {
$("#myForm").parsley();
$.listen('parsley:field:error', function(){
var i = 0;
$("#myForm .form").each(function(k,e){
var field = $(e).data("err");
$(e).next("ul").find("li:eq("+i+")").html(field+" is required");
});
});
});
here is working fiddle JsFiddle

Validate input textbox with image

I have 13 input text boxes simply to collect information from user. I'm trying to add a little bit of logic that when user clicks next button check to see if input field is blank and if so place a X image after the textbox. Where I'm getting up up at is if I put text in the box then it will not outline the box in red but still places an X after the form.
I've tried using the $.each() and $.filter()
Here is the js:
var invalid = '<img src="css/Filtration/img/x.png" /> ';
$('.btn').click(function () {
var inputs = $(":input").filter(function () {
return this.value === "";
});
if (inputs.length) {
$(inputs).css('border-color', 'red').after(invalid);
console.log(inputs.length);
}
});
Here is some of the input text boxes not all :
<label>First Name:</label>
<input type="text" name="First Name" class="txtbox" id="firstName" />
<label>Last Name:</label>
<input type="text" name="Last Name" class="txtbox" id="lastName" />
<label>Email Address:</label>
<input type="text" name="Email Address" class="txtbox" id="email" />
<label>Company:</label>
<input type="text" name="Company" class="txtbox" id="company" />
Try this:
var invalid = '<img src="css/Filtration/img/x.png" /> ';
$('.btn').click(function () {
$(":input").each(function () {
if($(this).val() == '' ){
$(this).css({borderColor: 'red'}).after(invalid);
}
});
});
Note that if you had not previously set other border css parameters, the color may not work. So this pattern can take care of it in that case:
.css({border: '1px solid red'})
Now, :input is a bit broad and therefore inefficient. Therefore, its better to say:
$(':text', '#container').each(...
Where #container is, of course, the container of all your inputs.
Please, consider use jquery Validate, you can see examples here and documentation here

Categories