How to display a text when button click when all the * input are not fill and when fill the * go hide?

Question

I would like some help where there a text where i would like to display if the button is press and this text appear * is mandatory if the input field are not fill up with those there are * how can i do this ?

This is my snippet where i have all the form created now i would want that this * is mandatory when the add button is press when the input is not fill up how can i do that ?

$('#submitbutton').click(function() {
  var passwordInput = $('#passwords')
  //Empty password validation
  if (passwordInput.val() == '') {
    $('.password-notmeet').show();
    $('#mandatoryField').show();
    // $('.password-empty').show();
    return;
  } else {
    $('#mandatoryField').hide();

  }
});




  * is mandatory

  
    *Name:
    
      
      
        Enter a Name!
      
    
  

  
    *Email:
    
      
      
        Enter a correct Email format!
      
    
  



  
    *Username:
    
      
      
        Username must meet the following requirements:

        At least four letter
      

    
  



  
    *Password:
    
      
      
      
      
        Password must meet the following requirements:
        


         At least one capital letter
        

         At least one special character
        

         At least one number
        

         Be at least 7 letter
      
    
  

  
    *Re-enter

Password:
    
      
      
      
        Password do not match or value is null!
      
    
  

  

  
    *Role:
    
      
      
        Enter a valid user role!

Professor Abronsius · Accepted Answer

With some modifications to the HTML to try to make it valid - is this what you were trying to do more or less?

When the Add button is clicked the form is initially prevented from the default submit behaviour so that ALL input elements might be checked to see if the value is empty. If it is empty a clone of the template contents is made ( with the * is mandatory text ) and appended to the parent node. As I am unfamiliar with jQuery the following is all done with vanilla Javascript but no doubt there are some slick jQuery methods that could be used to replace portions of this?!

document.querySelector('button[type="submit"]').addEventListener('click',function(e){
  e.preventDefault();
  let errors=[];
  
  let col=document.querySelectorAll('input,textarea');
      col.forEach(n=>{
        
        // remove any existing error(mandatory) messages
        let span=n.parentNode.querySelector('span.mandatory');
        if( span!==null ){
          n.parentNode.removeChild(span)
        }
        
        // if the value is empty, add the error (mandatory) message
        if( n.value=='' ){
            let tmpl=document.querySelector('template').content.cloneNode(true);
                tmpl.querySelector('i').textContent=n.name;
            n.parentNode.appendChild( tmpl );
            errors.push(n.name);
          }
      });
      
  if( errors.length==0 ){
    alert('OK - submit the form');
  }
});




const onChange=(e)=>{
  let css={
    err:'invalid',
    ok:'valid'
  };
  
  let col=document.querySelectorAll('.pwdcheck');
      col.forEach(n=>{
        n.classList.remove(css.err,css.ok);
        
        if( col[0].value!=col[1].value )n.classList.add(css.err);
        else n.classList.add(css.ok);
      });
      
};

span.mandatory{
  color:red;
  display:inline-block;
  padding:0.25rem;
  margin:0,5rem 0;
  border:1px solid red;
  background:pink
}
span.mandatory > i{
  color:white;
}
.invalid-feedback{
  opacity:0;
}
.visible{
  opacity:1;
}
label.col-form-label:before{
  content:'*';
  color:red;
}
.invalid{
  background:pink;
  color:white;
}
.valid{
  background:rgba(0,255,0,0.5);
}




  
    Name:
    
      
        
      
        Enter a Name!
      
    
  

  
    Email:
    
      
        
      
        Enter a correct Email format!
      
    
  



  
    Username:
    
      
        
      
        Username must meet the following requirements:
        At least four letter
      

    
  



  
    Password:
    
      
        
      

      
        Password must meet the following requirements:
         At least one capital letter
         At least one special character
         At least one number
         Be at least 7 letter
      
    
  

  
    Re-enter

Password:
    
      
        
      
      
        Password do not match or value is null!
      
    
  

  

  
    Role:
    
    
      
      
      
        Enter a valid user role!

How to display a text when button click when all the * input are not fill and when fill the * go hide?

Answers (1)

Related Questions