The form submits even when there are validation errors. How do I disable the submit button when there are validation errors? Here is the .js file
,submitFu:function(){
_.validateFu(_.labels)
if(!_.form.has('.'+_.invalidCl).length)
$.ajax({
type: "POST",
url:_.mailHandlerURL,
data:{
name:_.getValFromLabel($('.name',_.form)),
email:_.getValFromLabel($('.email',_.form)),
phone:_.getValFromLabel($('.phone',_.form)),
//fax:_.getValFromLabel($('.fax',_.form)),
//state:_.getValFromLabel($('.state',_.form)),
message:_.getValFromLabel($('.message',_.form)),
owner_email:_.ownerEmail,
stripHTML:_.stripHTML
},
success: function(){
_.showFu()
}
})
},
showFu:function(){
_.success.slideDown(function(){
setTimeout(function(){
_.success.slideUp()
_.form.trigger('reset')
},_.successShow)
})
},
And here is the form:
<form id="contact-form" action="contactTq.php" method="post">
<div class="success"> Contact form submitted! <strong>We will be in touch soon.</strong></div>
<fieldset>
<label class="name">
<input type="text" name="name" value="Enter Your Name:" >
<span class="error">*This is not a valid name.</span>
<span class="empty">*This field is required.</span>
<span class="clear"></span>
</label>
<label class="email">
<input type="text" name="email" value="Enter Your E-mail:">
<span class="error">*This is not a valid email address.</span>
<span class="empty">*This field is required.</span>
<span class="clear"></span>
</label>
<label class="phone">
<input type="text" name="phone" value="Enter Your Phone (optional):">
<span class="error">*This is not a valid phone number.</span>
<span class="clear"></span>
</label>
<label class="message">
<textarea name="msg">Enter Your Message:</textarea>
<span class="error">*The message is too short.</span>
<span class="empty">*This field is required.</span>
<span class="clear"></span>
</label>
<div class="buttons"><strong><a class="button" data-type="reset">Reset<span></span></a></strong><strong><a class="button" data-type="submit" href="javascript:{}" onclick="document.getElementById('contact-form').submit();">Submit<span></span></a></strong></div>
</fieldset>
</form>
Knockout.js does a wonderful job of doing exactly what you're looking for. You can slip your existing javascript into a ViewModel, and then put a data-bind on your button to enable if all fields validate. You can see how to do so here: http://knockoutjs.com/documentation/enable-binding.html
It appears that you are submitting the form as soon as the button is clicked because the onclick handler is written as below:
onclick="document.getElementById('contact-form').submit();"
Just change the onclick handler to execute the submitFu function and that should do the trick.
Change the onclick event of your submit button to
onclick="return submitFu()"
If the validation fails, return false and the form will not submit. I think you can do the same with the onsubmit event of the form.
Related
How to make the submit button go the link destination , but first the checkbox must be checked ?
My issue is whenever I click on Pay: it doesn't wait the ckeckbox to be checked
function checkForm(form) {
if (!form.terms.checked) {
alert("Please indicate that you accept the Terms and Conditions");
form.terms.focus();
return false;
}
return true;
}
const pay = document.getElementById("submitBtn");
pay.addEventListener("click", myFunction);
function myFunction() {
window.location.href = "google.com"
}
<form class="n-chk" style="margin-bottom:1em ;text-align:center;">
<label class="new-control new-checkbox checkbox-primary">
<input onsubmit="return checkForm(this);" type="checkbox" required >
<span class="new-control-indicator"></span>
<span class="text-dark"> I agree to the
Terms of Use &
Privacy Policy
</span>
</label>
<input type="submit" id="submitBtn" class="btn btn-primary" data-bs-toggle="button" autocomplete="off">
</form>
onsubmit="return checkForm(this);" belongs on the form element
But since you made it required, just remove all JS and add the action to the form
Also never add event handlers to submit buttons. Add an eventListener to the submit event instead and use preventDefault
So EITHER this
<form action="yourpaymentpage.php" class="n-chk" style="margin-bottom:1em ;text-align:center;">
<label class="new-control new-checkbox checkbox-primary">
<input type="checkbox" required >
<span class="new-control-indicator"></span>
<span class="text-dark"> I agree to the
Terms of Use &
Privacy Policy
</span>
</label>
<input type="submit" id="submitBtn" class="btn btn-primary" data-bs-toggle="button" autocomplete="off">
</form>
OR (not recommended)
document.getElementById("form1").addEventListener("submit",e => {
e.preventDefault()
location = "yourpaymentpage.php";
})
<form id="form1" class="n-chk" style="margin-bottom:1em ;text-align:center;">
<label class="new-control new-checkbox checkbox-primary">
<input type="checkbox" required >
<span class="new-control-indicator"></span>
<span class="text-dark"> I agree to the
Terms of Use &
Privacy Policy
</span>
</label>
<input type="submit" id="submitBtn" class="btn btn-primary" data-bs-toggle="button" autocomplete="off">
</form>
i have form for selected date. how to disable the submit button if nothing changed in date form?
my html code
<div class="col-xs-6">
<label><i class="far fa-calendar-alt"></i> Start <span class="text-danger">*</span></label>
<input id="startTrip1" name="NgbDate" data-provide="datepicker" ngbDatepicker #d="ngbDatepicker" [markDisabled]="markDisabled" [minDate]="minDates" type="text" class="form-control form-flat" [(ngModel)]="ad.start_date" (dateSelect)="onDateSelect($event, ad)" (blur)="validateInput()" (click)="d.toggle()" [ngModelOptions]="{standalone: true}" [disabled]="form.controls.tripduration.hasError('required')" >
<div class="text-danger" *ngIf="(ad.start_date == '' || ad.start_date == undefined) && ngForm.submitted">
* This field is required
</div>
<div class="text-danger" *ngIf="form.controls.tripduration.hasError('required')">
* Fill the durations first
</div>
</div>
//submit button
<button class="col-xs-12 text-center text-strong pointer custom-trip-btn" (click)="publishTrip()">
<button class="custom-trip-btn">SUBMIT</button>
If you used below code, the button only enabled if user changed value in the form
[disabled]="!(accountForm.valid && accountForm.dirty)"
<form [formGroup]="profileForm">
<label>
First Name:
<input type="text" formControlName="firstName">
</label>
<label>
Last Name:
<input type="text" formControlName="lastName">
</label>
</form>
<button type="submit" [disabled]="!profileForm.dirty">Submit</button>
Read more about it here
Hope this works!
<label>
First Name:
<input type="text" formControlName="firstName">
</label>
<label>
Last Name:
<input type="text" formControlName="lastName">
</label>
</form>
<button [disabled]="!(profileForm.valid ||!profileForm['isDirty']())"
class="btn btn-primary">Submit</button>
Check some what same question here
Stackblitz-example of some old problem of mine
for the above you need to use RxReactiveFormsModule RxReactive npm
So basically I have a page where users can post a status, users are able to comment on these status's by typing in the textbox and clicking on the 'Reply' button. However I much rather remove the button so users can just press the enter key to post a reply. Any help would be greatly appreciated!
<div id="status_'.$statusid.'" class="panel panel-default">
<form>
<div class="input-group">
<input type="text" id="replytext_'.$statusid.'" onkeyup="statusMax(this,250)" class="form-control" placeholder="Add a comment.." autocomplete="off">
</div>
<button id="replyBtn_'.$statusid.'" onclick="replyToStatus('.$statusid.',\''.$url.'\',\'replytext_'.$statusid.'\',this)">Reply</button>
</form>
</div>
You can submit a form by pressing enter when a form element is active. See the following snippet that just hooks into the form via it's onSubmit event handler.
function handleSubmit() {
alert('Do your thing...');
}
<form id="commentForm" onSubmit="handleSubmit(); return false;">
<div class="input-group">
<input type="text" id="replytext_" class="form-control" placeholder="Add a comment.." autocomplete="off">
</div>
</form>
I have a input field, where i have to show error messages, but its not working.. the error messages are not shown.
<div class="form-group grouped">
<div>
<label for="card-routingNumber">Number:</label>
<input name="cr" ng-model="card.rn" type="number" pattern="[0-9]*" id="card-rn" class="form-control" validate-on="submit" required />
<span class="help-block" ng-show"form.cr.$error.required">Field is empty</span>
</div>
</div>
When i click on submit, i need to show an error message if the input is empty.. but when i try... it always says "Required"
Add "novalidate" attribute to your form.
You can try
<span class="help-block" ng-show=**"!myForm.myInput.$valid"**>Field is empty</span>
remove required attribute from the <input>
<input name="cr" ng-model="card.rn" type="number" pattern="[0-9]*" id="card-rn" class="form-control" validate-on="submit" />
I have read the parsley.js docs but I am still learning JQuery so it goes in one ear and out the other.
I think I need to add a custom event listener to achieve what I need, but I am really not sure, so some help would be appreciated.
I have a form with parsley.js embedded. The form works as expected but I have to add some functionality to the form.
How would I display an alert message (alert('no client side errors!');) to the user when all the client side errors have been cleared or when there are no client side errors when the form is submitted?
Here is an example of my form code:
<form id="name_details_form" class="form-horizontal" method="post" data-parsley-validate>
<div id="row_id_name_details_first_name" class="control-group">
<label for="id_name_details_first_name" class="control-label required">First Names:</label>
<div class="controls">
<input data-parsley-required="true" data-parsley-maxlength="200" data-parsley-required-message="This field is required." maxlength="200" type="text" id="id_name_details_first_name" name="name_details_first_name" class="input-xxlarge parsley-error" data-parsley-id="8581" dir="ltr"><span class="parsley-errors-list filled" id="parsley-id-8581" style="display: none;"><span class="parsley-required">This field is required.</span></span>
</div>
</div>
<div id="row_id_name_details_middle_name" class="control-group">
<label for="id_name_details_middle_name" class="control-label ">Middle Names:</label>
<div class="controls">
<input id="id_name_details_middle_name" type="text" name="name_details_middle_name" data-parsley-maxlength="200" maxlength="200" class="input-xlarge" data-parsley-id="7500"><span class="parsley-errors-list" id="parsley-id-7500" style="display: none;"></span>
</div>
</div>
<div id="row_id_name_details_last_name" class="control-group ">
<label for="id_name_details_last_name" class="control-label required">Last Names:</label>
<div class="controls">
<input data-parsley-required="true" data-parsley-maxlength="200" data-parsley-required-message="This field is required." maxlength="200" type="text" id="id_name_details_last_name" name="name_details_last_name" class="input-xxlarge parsley-success" data-parsley-id="7577" dir="ltr"><span class="parsley-errors-list" id="parsley-id-7577" style="display: none;"></span>
</div>
</div>
<hr />
<input class="btn-u btn-u-blue" type="submit" value="Add">
</form>
<script>
....
</script>
This code shows the alert message when the form is submitted and the all fields are valid.
<script>
$(document).ready(function() {
// bind parsley to the form
$("#name_details_form").parsley();
// on form submit
$("#name_details_form").on('submit', function(event) {
// validate form with parsley.
$(this).parsley().validate();
// if this form is valid
if ($(this).parsley().isValid()) {
// show alert message
alert('no client side errors!');
}
// prevent default so the form doesn't submit. We can return true and
// the form will be submited or proceed with a ajax request.
event.preventDefault();
});
});
</script>