Skip to content
This repository has been archived by the owner on Mar 12, 2020. It is now read-only.

Validator currently validates buttons as inputs #93

Closed
MatiasSM opened this issue Mar 21, 2015 · 6 comments
Closed

Validator currently validates buttons as inputs #93

MatiasSM opened this issue Mar 21, 2015 · 6 comments
Assignees
@1000hz
Labels
bug

Comments

@MatiasSM
Copy link

When using a form-group with 2 div (col-sm) in it, the help-block is not displaying (however validation is being carried, because the submit button still appears disabled). Here is a piece of code that reproduces the issue:

<!doctype html>
<html lang="es-AR">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">   
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>  
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>     
</head>

<body class="full">     
  <div class="container-fluid">        
    <form data-toggle="validator" class="require-donor-form form-horizontal" role="form">          

      <!--
      <div class="form-group">
        <label class="col-sm-2 control-label">Count</label>
        <div class="col-sm-9">
          <input type="number" class="form-control" min="1" required>
          <span class="help-block with-errors"/>
        </div>
      </div>
      -->
      <div class="form-group">
        <label class="col-sm-2 control-label">E-mail</label>
        <div class="col-sm-9">
          <input id="reqEmail" type="email" class="form-control" name="email" placeholder="E-mail" required>
          <div class="help-block with-errors"></div>    
        </div>
        <div class="col-sm-1">
          <button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" data-placement="top"  data-content="Some text">?</button>
        </div> 
      </div>

      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-2">
          <button type="submit" class="btn btn-primary">Submit</button>
        </div>          
      </div>
    </form>
  </div>

    <script src="js/validator.js"></script>
</body>
</html>

The commented out input displays correctly the message while the e-mail one doesn't.
@1000hz 1000hz added the bug label Mar 22, 2015
@1000hz
Copy link
Owner

1000hz commented Mar 22, 2015

It looks like it's trying to validate the button as an input and clearing the error. Thanks for the report.

@1000hz 1000hz self-assigned this Mar 22, 2015
@1000hz 1000hz changed the title Not showing help-block when multiple divs are in form-group Validator currently validates buttons as inputs Mar 22, 2015
@MatiasSM
Copy link
Author

Thank you for this cool piece of software. Looking forward for the patch!

@MatiasSM
Copy link
Author

Do you have any clue about how can I workaround this issue while the patch is being developed?
And, just to know, do you know about when the patch will be available?

Thank you very much for your help and feedback!

@1000hz
Copy link
Owner

1000hz commented Mar 23, 2015

I think you could change the <button> to an <a> to workaround the issue. Another option is to move the button outside of the .form-group.

I might be able to get a patch in sometime this week.

@MatiasSM
Copy link
Author

Changing the tag to "a" worked perfectly. However, with such a fast response to getting the patch ready, I will prefer to wait for it.
Thank you very much!

@1000hz 1000hz closed this as completed in d727846 Apr 2, 2015
1000hz added a commit that referenced this issue Apr 2, 2015
@1000hz
whoops, missed a place where I need to use inputSelector
ba4b420 
refs #93 #65
@MatiasSM
Copy link
Author

MatiasSM commented Apr 2, 2015

Installed v0.8.1 and everything worked without html changes. Great job!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@1000hz 1000hz

Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@1000hz @MatiasSM