I'm using bootstrap validator to validate the form in my react app, facing issues like the submit button is disabled but still clickable in the form, I want to make the button non clickable until the form gets validated. I added the disabled property but its not getting enabled once the form is valid.Below is my code.. Can anyone help here
<form data-toggle="validator" role="form">
<div className="form-group">
<div className="col-xs-5" id="form" style={{display:'none'}}>
{this.renderForm(this.props.fld_dtl_da)}
<button type="button" className="btn btn-default" onClick={this.ClearForm}>Clear</button>
<button type="submit" disabled='disabled' className="btn btn-primary" onClick={this.HandleClick}>Submit</button>
<br/><br/>
</div>
<div id="url" class="alert alert-info" style={{display:'none'}}>
<Confirmation message={this.state.message}/>
</div>
</div>
</form>
Related
I'm working on a function that allows agents to check and modify on what inventory their customers bought.
Basically, it's an update form inside a bootstrap modal, which is in a partial view under another partial view.
At first, I tried to bind my view model with the form inside the modal using tag helper. Something like:
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Update Inventory</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form id="UpdateForm" asp-controller="Home" asp-action="UpdateD" data-ajax-method="post" data-ajax="true" data-ajax-success="InsertSuccess">
<div class="modal-body">
<div class="mb-3 row">
<label asp-for="FieldExample" class="col-sm-2 col-form-label">FieldExample</label>
<div class="col-sm-10">
<input asp-for="FieldExample" class="form-control">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">UpdateBtn</button>
</div>
</form>
</div>
</div>
I checked the form tag was closed properly and the data fields were valid.
But the form turns out to render none of my fields, closing immediately, like this:
<form id="UpdateForm" data-ajax-method="post" data-ajax="true" data-ajax-success="InsertSuccess" action="/Home/UpdateD" method="post"></form>
<div class="modal-body">
<div class="mb-3 row">
<label class="col-sm-2 col-form-label" for="PLAN_TYPE">FieldExample</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="FieldExample" name="FieldExample" value="test">
</div>
</div>
(...other fields)
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">UpdateBtn</button>
</div>
<input name="__RequestVerificationToken" type="hidden" value="...">
</div>
The form doesn't include my data fields for some reason, and I don't know what is making it wrong.
Even if I tried to make a form using a simple form tag with test fields inside, the form is still malformed (with no fields inside).
It will be thankful for me if some suggestions come up (sorry for my language)
After struggling a few days on this issue, I finally solved the problem by adding <td></td> on the <partial>.
Since the partial was rendered in a <table>, but wasn't nested in a <td> tag.
Adding partial view to a <td> tag seems to make the syntax more valid in my case. The form in the partial view will render with it's data field perfectly.
I am trying to insert a form into my site.Master but when I debug it, it seems to have removed the form.
<form onsubmit="quoteMe(event)">
<div class="form-group" id="divQuotePriceBeforeBook">
<button class="btn btn-block btn-primary" id="quotemebutton" type="submit">Quote Now</button>
</div>
</form>
I can see that there is a server form wrapping the entire body, does this mean we can't have forms?
No you cannot do that using WebForms but there is always a work around.
Based off of your code it doesn't seem like you need a form for what you are trying to accomplish.
<div class="form-group" id="divQuotePriceBeforeBook">
<button class="btn btn-block btn-primary" id="quotemebutton" onclick="quoteMe()">Quote Now</button>
</div>
If you really do need the code to post back to the server, you would want to do something like this:
<div class="form-group" id="divQuotePriceBeforeBook">
<asp:Button id="quotemebutton" runat="server" CssClass="btn btn-block btn-primary" OnClientClick="quoteMe()" Text="Quote Now" />
</div>
I have a form in razor page with 2 button.
<form method="post" class="form-group ">
<div class="form-group col-md-3">
<div class="input-group">
<input asp-for="DoctorViewModel.NationalCode" class="form-control" type="text" maxlength="10" required onblur="">
<div class="input-group-append">
<button class="btn btn-outline-primary " asp-page-handler="GetInfo" >search</button>
</div>
</div>
<span asp-validation-for="DoctorViewModel.NationalCode"></span>
</div>
.
.
<div class="form-group col-md-2">
<label asp-for="DoctorViewModel.Name" class="col-form-label"></label>
<input asp-for="DoctorViewModel.Name" class="form-control" type="text" maxlength="50" required>
<span asp-validation-for="DoctorViewModel.Name"></span>
</div>
.
.
.
.
<input type="submit" class="btn btn-success" value="Save"/>
</form>
and when click on search button i wants to load form info from a handler.
but when click this button get validation error.
How i can disable validation check for only search button. in asp.net form i used CauseValidation=false.
To skip validation while still using a submit-button, you can try to add the attribute formnovalidate :
<button class="btn btn-outline-primary" formnovalidate asp-page-handler="GetInfo">search</button>
The default type for a button is to submit the form it is contained within in most browsers.
You simply need to add a type of button and this should stop the submit and therefore the automatic validation will not trigger.
<button class="btn btn-outline-primary " type="button" asp-page-handler="GetInfo" >search</button>
am facing a weird issue with Invisible recaptcha. After 2 minutes when Recaptcha is getting expired its throwing script error "Object not found". Even tried using WidgetID but showing the same behavior. The only difference is I have an extra step in between the Recaptcha submit and my form submit. After successful recaptcha Submit on a button click a Pop up div opens on the page and the final submit happens on the click of pop up div submit button. All the submit process is working properly but when captcha expires in case form is left as idle for more than 2 minutes over the pop up div then it throws the error. Below is the code snippet:
<div>
<div>
...................
<div class="form__group">
<label class="text captcha"></label>
<div class="g-recaptcha" data-badge="inline" data-sitekey="{$CaptchaWebsiteKey}" data-size="invisible" data-expired-callback="validateExpire" data-callback="onSubmit"></div>
</div>
<div class="form__group">
<input id="btnPopUp" type="submit" class="btn btn--primary btn--full btn--xs-full" value="Submit your details"/>
</div>
</div>
</div>
<div id="modal" style="visibility:hidden;" class="modal">
<div class="modal-content">
<div class="modal-space">
...................
<div class="modal-space1">
<input type="submit" id="btnSubmit" value="Submit" class="modal-btn modal-space2 btn btn--primary btn--xs-full" disabled="true"/>
<input type="submit" value="Cancel" onclick="return closePopup();" class="modal-btn modal-space2 btn btn--primary btn--xs-full" />
</div>
</div>
</div>
</div>
<div class="overlay"></div>
<script language="javascript" type="text/javascript">
onload();
function onload() {
var element = document.getElementById('btnPopUp');
element.onclick = validate;
}
var captchaResponse='';
function onSubmit(response){
captchaResponse = response;
openPopup();
}
function validateExpire() {
grecaptcha.reset();
captchaResponse='';
}
</script>
Can anyone help regarding this issue? Thanks in advance.
here is the website http://www.checker.freeproxy.ru/checker/
am trying to fill in the textbox using webbrowser how ever the textbox in webbrowser does not have any id at all here is the html source to the textbox.
<p class="lead">paste proxies you'd like to check below (100 max per time)</p>
<form method="post" action="/checker/" id="checker-form">
<fieldset>
<textarea rows="3"></textarea>
</fieldset>
<p id="checker-form-toolbar">
<button type="submit" class="btn btn-primary btn-block" data-checking-text="Checking proxies...">Check proxies</button>
</p>
i even tried
wb.Document.getElementById("textarea").focus
wb.Document.getElementById("textarea").innerText = Text4.Text
it dont work