I am working with Html code:
<div class="login">
<form class="form-horizontal signin">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email : </label>
<div class="col-sm-5 more">
<input type="email" class="form-control top" id="emailLogin" placeholder="Email" size="100">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password : </label>
<div class="col-sm-5 passLog">
<input type="password" class="form-control" id="passwordLogin" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
Additionally, I have included the following jquery code:
$(".signin").submit(function(){
$('.error').remove();
var hasError = false;
if($.trim($("#emailLogin").val())=="")
{
$(".more").append('<span class="glyphicon glyphicon-remove error" role="alert"></span>');
hasError = true;
}
if($.trim($("#passwordLogin").val())=="")
{
$(".passLog").append('<span class="glyphicon glyphicon-remove error" role="alert"></span>');
hasError = true;
}
if(hasError == true)
return false;
else
return true;
});
However, I am facing an issue where the span elements are displayed as block structures instead of inline. To resolve this, I need to add the following css property:
display:inline;
This works fine in Chrome but does not render correctly in Firefox.