CODEWITHSUNDEEP
javascripthtmlformsprinting
Gui
Gui

Reputation: 65

Printing text next to a form field in JavaScript

I'm having a bit of trouble with this assignment and would like your help. We are meant to create a product registration form page with all the regular expressions and everything and display the correct error when the regexes don't match.

I am trying to print a tick or say OK next to a form field but I can't get the right function.

The "Please enter product ...." is activated by jquery with a slideUp and slideDown function with onblur on the text field.

So I want to display OK where the red circle is after you click away from it, and then if you change it to something that doesn't match the OK disappears and my alert shows up. So this is my code so far:

My html form:

<div>
<input type="text" class="name" placeholder="Name" name="name" onblur="return validateProductName()"> <p class ="p11" id="p1"></p>
  <p class="name-help">Please enter a product name between 1-50 characters.</p>
</div>

My css:

.p11 {
float: right;}

My jQuery:

$(".name").focus(function(){
  $(".name-help").slideDown(500);
}).blur(function(){
  $(".name-help").slideUp(500);
});

And then my JavaScript:

    // Function to validate product name
function validateProductName() {

    // if statement for product name
    if (document.myForm.name.value.trim().search(pName) == -1) {
    
        alert("Invalid product name. Please note: product name should have 1-50 characters.");
        
        
    } else {
        
        document.getElementById("p1").innerHTML = "OK";
    }
    
}

So, it prints the OK in between the field on the right side, but I want it right next to the field like I showed in the picture and I can't get this to work! I want it to disappear if I go back to the form and put something wrong...

Upvotes: 1

Views: 2345

Answers (3)

Vibhaas Srivastava
Vibhaas Srivastava

Reputation: 857

This should work-

<script src="jq.js"></script>
<div>
<input type="text" class="name" placeholder="Name" name="name" id="input"> <span class ="p11" id="p1"></span>
  <p class="name-help">Please enter a product name between 1-50 characters.</p>
</div>
<style>
p11 {
float: right;}
</style>
<script>
$(".name").focus(function(){
  $(".name-help").slideDown(500);
}).blur(function(){
  $(".name-help").slideUp(500);
  validateProductName()
});
</script>
<script>
    // Function to validate product name
function validateProductName() {
    // if statement for product name
    if (document.getElementById("input").value.trim() == "" || document.getElementById("input").value.length > 50 ) {

        alert("Invalid product name. Please note: product name should have 1-50 characters.");
       document.getElementById("p1").innerHTML = "";


    } else {

        document.getElementById("p1").innerHTML = "OK";
    }

}
</script>

Upvotes: 0

user786
user786

Reputation: 4364

Create a span wherever you want your tick to be displayed and they do this,

$("#btn").click(function() {
  if ($("#txtname").val() == "") //can be any check
  {

    $("#g").attr("style", "display:block;width:20px");

  } else {
    $("#g").attr("style", "display:none;width:20px;");
  }



})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type="text" id="txtname" style="display:inline-block" placeholder="enter name" />
<img id="g" style="width:50px;display:none;" src="http://pixabay.com/static/uploads/photo/2014/04/02/10/19/check-303494_640.png" />
<br/>
<input type="button" id="btn" value="click to submit" />

Upvotes: 1

Abhinav
Abhinav

Reputation: 8168

I assume, you have no problem with the jQuery itself, you have a problem of showing it next to input box. So,

Create a <span id='tick'> tag after the input field

And once it passes the validation, use jquery to show the tick

$('#tick').html('whatever you want');

EDIT: You dont have to include the float:left on span

Check out the fiddle link

EDIT:

In this validation function, just show and hide according to the validation results

     // Function to validate product name
    function validateProductName() {

        // if statement for product name
        if (document.myForm.name.value.trim().search(pName) == -1) {

          document.getElementById("tick").style.display = 'none'; // to hide the OK text if enterd the wrong input  


        } else {

            document.getElementById("tick").innerHTML = "OK"; //NOTE: This is for showing the ok text
  document.getElementById("tick").style.display= "block";
        }

    }

Upvotes: 1

Related Questions