How to make the user enter either of the 2 fields - javascript

<input type="text" name="firstname" placeholder=" Enter First Name" required/><input type="hidden" name="search" value="true" >
<input type="text" name="lastname" placeholder="Enter Last Name" /><input type="hidden" name="search" value="true" >
I have got these 2 text boxes and I am using these text boxes for searching users on a webpage.
I want the users can search using both these text boxes.
I have written the query for that but I am facing a problem, if user writes anything in either of the text boxes then it should not show any error on the front end but if user leaves both text fields empty then an error should be generated and I want to do it on the design page.
I don't want to write a validation code for that.
I have tried required field but it does not work in my case as either of the 2 text boxes should be input with data.

If you want to do validation in UI, please follow the below steps
1) Provide id's to both the input fields, which are used to validate the fields
<input type="text" id="firstname" name="firstname" placeholder=" Enter First Name" required/><input type="hidden" name="search" value="true" >
<input type="text" id="lastname" name="lastname" placeholder="Enter Last Name" /><input type="hidden" name="search" value="true" >
2) Using javascript you can valiate as below
function validate() {
if(document.getElementById("firstname").value.trim() != "" && document.getElementById("lastname").value.trim() != "" ) {
// show alert saying required input fields.
} else {
// do the submit action
}
}
3) Call the validate function on submit of the form.

Using Jquery/java script you can do client side validation..
Your HTML
<input type="text" id="first" name="firstname" placeholder=" Enter First Name" /><input type="hidden" name="search" value="true" >
<input type="text" id ="last" name="lastname" placeholder="Enter Last Name" /><input type="hidden" name="search" value="true" >
<input type="button" id="button1" value="check"/>
Validation
$("#button1").click(function()
{
$first=$("#first").val();
$sec=$("#last").val();
if(($first=="")&&($sec==""))
{
alert("Please enter any");
}
});

Related

How to print set of input boxes which have same input name into div onKeyUP

I have input boxes set to enter fname lname, there are 10 boxes with these input names. And i want to print the value onKeyup to a div. Please advise.
<input required class="special-block" type="text" name="fname[]" class="fname" onkeyUp="document.getElementById('refa5').innerHTML = this.value" placeholder="Name" />
<input required class="special-block" type="text" name="lname[]" placeholder="Designation" onkeyUp="document.getElementById('refa5a').innerHTML = this.value" />
values should display here
<p id="refa5"><span class="fname"></span>-<span class="lname"></span></p>
Just concatenate current html with previous html using + operator.
So change
onkeyUp="document.getElementById('refa5').innerHTML = this.value"
To
onkeyUp="document.getElementById('refa5').innerHTML+= this.value"//concatenates with previous html
So
<input required class="special-block" type="text" name="fname[]" class="fname" onkeyUp="document.getElementById('refa5').innerHTML+= this.value" placeholder="Name" />
<input required class="special-block" type="text" name="lname[]" placeholder="Designation" onkeyUp="document.getElementById('refa5a').innerHTML+= this.value" />
Working Fiddle based on comments.

Check if an input with class is empty in a form

I wrote a code to validate a form on client-side. Since I binded all the error messages on('input', function()) now the last case to take in consideration is when the user didn't even hit a required input leaving it empty.
If all the inputs in the form were required I could have used something like
$('#subButton').on('click', function(e) {
if (!$('#formName').val()) {
e.preventDefault();
alert("Fill all the required fields");
});
But since in my form there are required inputs (with class="req") and non required inputs, I would like to know if there's a method to perform the check only on the .req inputs.
Something like:
$('#subButton').on('click', function(e) {
if (!$('#formName.req').val()) {
e.preventDefault();
alert("Fill all the required fields");
}
});
In other words I would like to perform the identical check which the up-to-date browsers do if the HTML required option is specified, just to be sure that, if the browser is a bit old and doesn't "read" the required option, jQuery prevents the form to be sent.
Just use .filter and check the length. Also, a simple ! check probably isn't good, what if someone enters 0?
var hasEmptyFields = $('#formName.req').filter(function() {
return this.value.replace(/^\s+/g, '').length; //returns true if empty
//Stole the above regex from: http://stackoverflow.com/questions/3937513/javascript-validation-for-empty-input-field
}).length > 0
if (hasEmptyFields) {
}
Use reduce
const submitAllowed = $('.req').toArray().reduce((result, item) => {
return result && (!!item.value || item.value === 0);
}, true)
if (!submitAllowed) { ... }
Here is a simple demo:
<form action="dummy.asp" onSubmit="return handleSubmit()">
<p> You can only submit if you enter a name </p>
<br />
Enter name: <input class="req" type="text" name="fname">
<input type="submit" value="Submit">
</form>
<script>
function handleSubmit() {
const submitAllowed = $('.req').toArray().reduce((result, item) => {
return result && (!!item.value || item.value === 0);
}, true)
return submitAllowed;
}
</script>
But since in my form there are required inputs (with class="req")
and non required inputs, I would like to know if there's a method to
perform the check only on the .req inputs
There is an HTML5 form boolean attribute required.
required works on:
<input type="text" />
<input type="search" />
<input type="url" />
<input type="tel" />
<input type="email" />
<input type="password" />
<input type="date" />
<input type="number" />
<input type="checkbox" />
<input type="radio" />
<input type="file" />
Example:
input {
display: block;
margin: 6px;
}
<form action="http://www.stackoverflow.com/">
<input type="text" placeholder="This is required" required />
<input type="text" placeholder="This isn't required" />
<input type="text" placeholder="This is required" required />
<input type="text" placeholder="This isn't required" />
<input type="submit" value="Press Me Without Filling in any of the Fields">
</form>
Peculiarly, the StackOverflow Snippet above doesn't seem to be working.
Here's a JSFiddle to demonstrate what it should be doing:
https://jsfiddle.net/a5tvaab8/

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

Auto Incrementing HTML Form ID's in input field

How does one auto-increment Id's to an HTML form so it's easier to classify? Kind of like an invoice/reference number? In other words, is it possible to create an hidden input field that would attribute a serie of numbers and also an ID automatically when the form page is loaded just like in Mysql for instance? The idea here is to make that happen for a form.
Im not familiar with JSP but im sure you can read and write files in JSP as this page says
JSP Reading Text File.
<%
String fileName = "/WEB-INF/NextID.txt";
InputStream ins = application.getResourceAsStream(fileName);
try
{
if(ins == null)
{
response.setStatus(response.SC_NOT_FOUND);
}
else
{
BufferedReader br = new BufferedReader((new InputStreamReader(ins)));
String data;
int nextID = Integer.parseInt(data= br.readLine());
%>
<form name="myWebForm" action="mailto:youremail#email.com" method="post">
First: <input title="Please Enter Your First Name" id="first" name="first" type="text" size="12" maxlength="12" />
Last: <input title="Please Enter Your Last Name" id="last" name="last" type="text" size="18" maxlength="24" /><br />
Password: <input type="password" title="Please Enter Your Password" size="8" maxlength="8" /><br /><br />
<!--This the line you are asking for-->
<input type="hidden" name="referenceNumber" id="referenceNumber" value="<%=request.getParameter("firstinput")%>" /><br />
<input type="submit" value="SUBMIT" />
<input type="reset" value="RESET" />
</form>
<%
}
}
catch(IOException e)
{
out.println(e.getMessage());
}
%>
EDIT: Possible solution. I may have made some syntax error as i dont know JSP at all. Learnt by myself just now

Fill Hidden Fields with text from a text input

I have multiple form fields that are hidden fields that need to be filled in based on the email address.
For example:
<input type="text" maxlength="255" class="cat_textbox" id="EmailAddress" name="EmailAddress" />
<!-- These fields are hidden -->
<input type="text" maxlength="255" class="cat_textbox" id="Username" name="Username" />
<input id="cc-email-fill" type="text" name="ea" size="20" value="">
<!-- End hidden fields -->
I tried the following code to fill the fields but it didn't work.
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j('#EmailAddress').change(function() {
$j('#Username').val($(this).val());
$j('#cc-email-fill').val($(this).val());
});
});
How do I fill the hidden fields?
You're trying to use $ when jQuery was assigned to $j.
$j('#Username').val($(this).val());
$j('#cc-email-fill').val($(this).val());
Should be:
$j('#Username').val($j(this).val());
$j('#cc-email-fill').val($j(this).val());

Categories