We Keep Coding

Default 'input is required/Please fill out this field' message doesn't show after using an icon inside input field

So I have this form where there is an input field that needs to be filled to submit the query. I haven't used a button to submit the form but instead used a font awesome icon inside the input field. And with Javascript I made the form submit if a user clicks on the icon.
It works perfectly as I wanted but the only issue is the form submits even if the field is empty. The required attribute isn't working, probably because I'm not using a button. So to stop the form to be submitted without a value I used an if statement to check if there's any value and using an alert instead of a message to the user if there's not. But I want to display the default message to the user which the browser shows that the field is empty. How can I display the default message to user if the field is empty in this situation?
Please note that I'm using node and express for the app and ejs as my template engine. The javascript code is in main.js file the public folder and not in the script tags inside the template.
$(document).ready(function() {
$("#searchIcon").click(function(e) {
e.preventDefault();
if (!$("#input").val()) {
alert("input empty");
} else {
$("#form").submit();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" />
<form id="form" action="/submit" method="GET">
<input type="text" id="input" name="search" required>
<i id="searchIcon" class="fas fa-search" aria-hidden="true"></i>
</form>

You can use the checkValidity() and reportValidity() methods of the form to trigger the default HTML5 validation:
jQuery(function($) {
var $form = $('#form');
$("#searchIcon").click(function(e) {
e.preventDefault();
if (!$form[0].checkValidity()) {
$form[0].reportValidity();
} else {
$("#form").submit();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" />
<form id="form" action="/submit" method="GET">
<input type="text" id="input" name="search" required>
<i id="searchIcon" class="fas fa-search" aria-hidden="true"></i>
</form>
However it should be noted that your code does not meet accessibility validation requirements due to the lack of a submit button.
You can easily include one, and thereby remove the need for any JS code, by styling it to look like the FontAwesome icon:
button.submit {
background: none;
border: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" />
<form id="form" action="/submit" method="GET">
<input type="text" id="input" name="search" required>
<button type="submit" class="submit"><i class="fas fa-search"></i></button>
</form>

How to populate input with jquery on-click

I want to populate an input field on click with jquery, currently am able to populate a normal html field but not an input field, the reason i want to achieve this is to enable submissions because currently the data populated on html field is not being submitted, I beleive that populating this data in an input field will enable possible submissions.
I am currently using the following code to achieve this:
function populatethefield() {
document.getElementById("populatethisfield").innerHTML = "data to be populated to the field";
}
The field html
< p id="populatethisfield"><p>
This works, but i want to populate an input field, rather than a paragraph field.

When trying to change the value of an input field, you have to access the value property because inputs do not have an innerHTML, but a value instead. See code below for a demonstration:
<input type="text" id="target" placeholder="test" />
<script>
document.getElementById('target').value = "Value Updated.";
</script>

Hope this is what you are looking for
$('.populate').click(function(e){
var data = 'Some Content'
$("#populatethisfield").html('<input value="'+data+'">')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<p id="populatethisfield"></p>
<button class="populate">Populate Input</button>

If you want a pure jquery solution use the val() method for input fields.
$('.populate').on('click', function() {
$('#target').val("data to be populated to the field");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<input type="text" id="target" placeholder="test" />
<button class="populate">Populate Input</button>

You can try this.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<script>
function changeValue(value){
document.getElementById("input").value= "Hello World";
}
</script>
<body>
<input type="button" onclick="changeValue(2)" value="Button">
<input type="text" id="input" value="">
</body>
</html>

How to off the Bootstrap Loading Button while text is still Empty

Please help
I want to off the bootstrap loading button while my textbox is still empty
the user need to fill all textbox before the submit button will change the text to loading
whats happening to me is that when the user click the submit button the bootstrap is loading too even the page textbox still has a required field.
this my current code
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function() {
$(".btn").click(function(){
$(this).button('loading').delay(1000).queue(function() {
$(this).button('reset');
$(this).dequeue();
});
});
});
</script>
<form class="form-horizontal" action="button.php" method="post" style=" width:450px;">
<label class="control-label col-xs-3">Username Name :</label>
<input type="textbox" class="form-control" name="txtfirst" placeholder="First Name"required>
<label class="control-label col-xs-3">Password :</label>
<input type="textbox" class="form-control" name="txtlast" placeholder="Last Name"required>
<button type="submit" class="btn btn-primary" data-loading-text=" Loading... ">Login</button>
</form>
Please help

From the code it looks like your js function call is bound to click event of the button and not submit event of the form. The click event does not do any form validations.
Try this: http://jsfiddle.net/Dde4U/
$(function() {
$(".btn").click(function(){
if($('.form-horizontal').valid()){ //Checks if form is valid
$(this).button('loading').delay(1000).queue(function() {
$(this).button('reset');
$(this).dequeue();
});
}
});
});

How to load content with next button

I have a form which requires 3 steps, 1 is a few details then when the user presses the "Next" button it moves on to the next step without using ajax and without checking if everything is correct.
I moved to angularJS today and would really like to get this to work.
Here is what i have.
<form id="mccheckout" method="post" action="{$smarty.server.PHP_SELF}?a=confproduct&i={$i}">
<input type="text" name="namefiled" id="namefiled" value="" required="" ng-maxlength="30" placeholder="Enter the name" ng-model="name" class="ng-valid ng-dirty">
<input type="submit">
</form>
When i press next i want to load the next step of the form if the name field is correct.
The next step should be:
<input type="text" name="namefiled" id="namefiled" value="" required="" ng-maxlength="30" placeholder="Enter the password" ng-model="password" class="ng-valid ng-dirty">
This should be in the same <form> I dont want it to be outside the form, the submit button should only check if everything is correct and then call for the next piece of the form.
Im not sure how to go about doing this and im fairly new to ajax. Should i load the form contents from the same page or an external file via ajax request?
Could you guys provide some example code on how you would do this.
Thank you for your time,

Here is one potential way of doing it:
<html lang="en">
<head>
<meta charset="utf-8">
<title>IrishGeek82 SO Help File</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,300,400italic,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script>
$(document).ready(function()
{
}
);
</script>
<style type="text/css">
.invalid
{
border:1px solid red;
}
</style>
<script type="text/javascript">
function validateStep1()
{
return true;
}
function validateStep2()
{
return true;
}
function validateStep3()
{
return true;
}
function validateStep4()
{
return false;
}
//Start at step 0
var currStep = 0;
//Each "step" refers to an element in your form that has an ID.
//We include a reference to a validation function in the JSON String
//So we can validate the field.
var steps = [{"stepName":"step1","validationMethod":validateStep1},
{"stepName":"step2","validationMethod":validateStep2},
{"stepName":"step3","validationMethod":validateStep3},
{"stepName":"step4","validationMethod":validateStep4}];
//This function runs the validation routine on the current
//step and advances to the next step on TRUE.
function validateForm(formObj)
{
console.log("Curr Step:"+currStep);
//You can perform your validation in here and only advance to the next step if you can.
//You could just as easily use anonymous functions in the JSON Object above.
if (steps[currStep].validationMethod())
{
currStep++;
if (currStep <= steps.length)
{
$("#"+steps[currStep].stepName).css("display","block");
console.log("Curr Step:"+currStep);
}
else
{
currStep--;
}
}
else
{
$("#"+steps[currStep].stepName).addClass("invalid");
}
}
</script>
</head>
<body>
<form id="someForm" name="someForm" action="#" method="get">
<input type="text" id="step1" name="step1" style="display:block;" value=""/>
<input type="text" id="step2" name="step2" style="display:none;" value=""/>
<input type="text" id="step3" name="step3" style="display:none;" value=""/>
<input type="text" id="step4" name="step4" style="display:none;" value=""/>
<hr>
<button id="navButton" onclick="validateForm('someForm');return false;">Next</button>
</form>
</body>
</html>
I created an array of ids that are elements in your form along with a function to validate each step.
The main function validateForm() looks up the validation function for the current step, runs it, and if the result is True, advances to the next step and shows the field.
Please let me know if that helps :)

action of submit: server side script.
content of form changeable with style.visibility or style.display
content of sUBMIT button changeable witout reload of document ?
it means:
document.getElementById("mccheckout").action this porperty changeable without reload of document ?
make more than 1 FORM (1 FORM per step)
if step1-form okay make step2-form visible und step1-form hidden (step3-form is hidden).
....

Enable submit button when filling in some field with text

I have the following form and javascript:
<script type="text/javascript">
function toggleButton(ref,bttnID){
document.getElementById(bttnID).disabled= ((ref.value !== ref.defaultValue) ? false : true);
}
</script>
<form action="" method="post" id="subscribe" name="subscribe">
<label>NAME:</label>
<input type="text" name="name" class="subName" onkeyup="toggleButton(this,'bttnsubmit');">
<label>EMAIL:</label>
<input type="text" name="email" class="subEmail" id="sub_email">
<input type="button" name="button" value="Subscribe" disabled='disabled' id='bttnsubmit'/>
</form>
When I first load my site the SUBMIT button is disabled, as I wanted, since the text field has no text in it. Now I would like to enable the button once some text has been placed within the text field.
Any help please?

The existing code in the question worked fine, but gets disabled when the text is removed. This may be desired by others but you could make a small change to have it permanently removed without needing jquery (jquery wasn't in the tags)
function toggleButton(ref,bttnID){
document.getElementById(bttnID).removeAttribute("disabled");
}
and add onkeyup="toggleButton(this,'bttnsubmit') to any fields that need to enable the button

Using jQuery:
$(document).ready(function() {
$('#bttnsubmit').attr('disabled','disabled');
$('input[type="text"]').keyup(function() {
if($(this).val() != '') {
$('input[type="submit"]').removeAttr('disabled');
}
});
});
source: jQuery disable/enable submit button

Adding the final code that did the trick:
<script type="text/javascript">
$(document).ready(function() {
$('#bttnsubmit').attr('disabled','disabled');
$('#subEmail').keyup(function() {
if($(this).val() != '') {
$('#bttnsubmit').removeAttr('disabled');
}
else {
$('#bttnsubmit').attr('disabled','disabled');
}
});
});
</script>