Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I have two fields mobile number and alternate mobile number.need java script validation.1st number should not be same as 2nd mobile number.I have tried something and it is working. I edited my question, with correct answer
This is html code:
<div style="color:red" class="col-sm-3"><input type="text" class="form-control" id="mbno" placeholder="Mobile" name="mbno" maxlength="13" required /></div>
<div style="color:red" class="col-sm-3"><input type="text" class="form-control" id="altmbno" placeholder="Alternate Mobile" name="altmbno" maxlength="13" />
<script type="text/javascript">
$.validator.addMethod("mobile_not_same", function(value, element) { // Method to check if 2 mobile numbers are same or not
return $('#mbno').val() != $('#altmbno').val() // mbno and altmbno are input id's
});
$(function(){
$("#save").prop('disabled', true);
// validate signup form on keyup and submit
$("#defaultForm").validate({ // defaultForm is a form id
rules: {
altmbno: {
required: true,
number : true,
mobile_not_same: true,
minlength: 10
},
mbno: {
required: true,
number : true,
mobile_not_same: true,
minlength: 10
},
},
messages: {
mbno: {
required: "Please enter 10 digitsmobile number !",
mobile_not_same: "mobile numbers should not be same",
},
altmbno: {
required: "Please enter 10 digitsmobile number !",
mobile_not_same: "mobile numbers should not be same",
},
}
})
});
</script>
Question shows less effort. Hope you remember next time.
You can easily achieve this using Jquery. Add Id to each input. Code will look like this.
<div style="color:red" class="col-sm-3"><input type="text" class="form-control" placeholder="Mobile" name="mbno" id="num1" maxlength="13" required /></div>
<div style="color:red" class="col-sm-3"><input type="text" class="form-control" placeholder="Alternate Mobile" name="altmbno" id="num2" maxlength="13" /></div>
Add script and Use keyup from jquery while typing second mobile number.
$("#num2").keyup(function(){
var bla = $('#num1').val();
var bla1 = $('#num2').val();
if(bla === bla1){
console.log('equal');
}else{
console.log('not equal');
}
}
If you don't want while typing and just after form submit, then write function and get values of two fields using Jquery (you can also get it by using getElementById). After that compare that two values.
Comparing two numbers should not be that hard
function validate() {
var mbno = document.getElementById('mbno');
var altmbno = document.getElementById('altmbno');
if (mbno.value === altmbno.value) {
alert("Error! The mobile numbers should not be the same");
} else {
alert("Numbers Are OK");
}
}
<div style="color:red" class="col-sm-3"><input type="text" class="form-control" id="mbno" placeholder="Mobile" name="mbno" maxlength="13" required /></div>
<div style="color:red" class="col-sm-3"><input type="text" class="form-control" id="altmbno" placeholder="Alternate Mobile" name="altmbno" maxlength="13" /></div>
<button onclick="validate();">Submit</button>
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
The community reviewed whether to reopen this question 1 year ago and left it closed:
Original close reason(s) were not resolved
Improve this question
I have below html and javascript but on form submission I get an error Method not allowed though I would like to stay on the same index.html and show the success message.
I have debugged the javascript and it bypasses the if condition even I put valid info.
index.html
<form method="post" name="FrmEnquiry" id="FrmEnquiry" onsubmit=" return sendEnquiryform();">
<input name="name" id="name" required="required" placeholder="Your Name">
<input name="email" id="email" type="email" required="required" placeholder="Your Email">
<div class="clearfix"> </div>
<textarea name="message" id="message" cols="20" rows="5" required="required" placeholder="Message"></textarea>
<div class="submit">
<input id="submit" name="submit" type="submit" value="Submit">
</div>
</form>
<span id="sucessMessage"> </span>
javascript.js
var name = $('#name').val();
var email = $('#email').val();
var message = $('#message').val();
$.post('mail.php', '&name=' + name + '&email=' + email + message, function(
result,
status,
xhr
) {
if (status.toLowerCase() == 'error'.toLowerCase()) {
alert('An Error Occurred..');
} else {
alert(result);
$('#sucessMessage').html(result);
}
}).fail(function(xhr, status, error) {
console.log(error); // this shows 'method not allowed' and then i get below alert
alert('something went wrong. Please try again');
});
return false;
}
You need to add action tag to your form.
Like this:
<form method="post" name="FrmEnquiry" id="FrmEnquiry" onsubmit=" return sendEnquiryform();" action="">
You can add the value where you want to send the post to.
Also refer to: https://www.w3schools.com/tags/att_form_action.asp
This question already has answers here:
Is the regular expression [a-Z] valid and if yes then is it the same as [a-zA-Z]?
(7 answers)
Closed 3 years ago.
I'm trying to use jquery validator plugin to test a regEx and display an error message when the regex is not matched. Take a look at the code that I have written so far.
<form name="sampleForm" id="sampleForm" class="col-xs-10 col-xs-offset-1" style="margin-top:10px;">
<input type="text" id="phoneNumber" name="phoneNumber" class="form-control" required/><br/>
<input type="text" class="form-control" id="name" name="name"/>
<button type="submit" class="btn btn-success col-xs-4 col-xs-offset-4" style="margin-top:10px;">Submit</button>
</form>
Also take a look at the js code that I have written below :
<script>
$().ready(function() {
$('#sampleForm').validate({
rules: {
phoneNumber: {
required: true,
nameTest: true
}
},
messages: {
phoneNumber: {
required: "Please enter anything"
}
}
});
});
jQuery.validator.addMethod("nameTest", function(value, element) {
return /^[a-Z]$/.test(value);
}, "success, it's working");
</script>
I just used a simple regEx to allow only a-z alphabets with /^[a-Z]$/.
I don't know why but I'm getting :
Invalid regular expression: /^[a-Z]$/: Range out of order in character class
Please help, thanks in advance :)
The error is because a (97) is after Z (90) in the ASCII encoding sequence - so the range is out of order:
console.log('a'.charCodeAt(0));
console.log('Z'.charCodeAt(0));
So this would be valid (but not intuitive):
/^[Z-a]$/
You should use this regex to match letters A to Z for both upper and lower case:
/^[A-Za-z]$/
I am trying to make phone number required if some logic holds true. When logic does hold true i see first two phone number fields say phone number is required even though i have entered something in them, only the third one doesn't show error. The error only goes away when i manually click on first two fields.
I also tried calling valid() method on first two phone fields inside phoneValidation method but it was causing infinite loop understandably. I suppose i can make this work by adding different validator methods for all three phone boxes but is there an elegant way to do this?
<div class="form-inline" style="margin-top: 5px;">
<input type="text" name="phone1" id="phone1" class="form-control" maxlength="3" size="3" /> -
<input type="text" name="phone2" id="phone2" class="form-control" maxlength="3" size="3" /> -
<input type="text" name="phone3" id="phone3" class="form-control" maxlength="4" size="4" />
</div>
JS
$("#thisForm").validate({
rules: {
"phone1" : { maxlength: 3, minlength: 3, digits: true, phoneValidation: true},
"phone2" : { maxlength: 3, minlength: 3, digits: true, phoneValidation: true},
"phone3" : { maxlength: 4, minlength: 4, digits: true, phoneValidation: true}
}
});
$.validator.addMethod("phoneValidation", function(value, element) {
// some logic
if ($("#someField").is(":checked"))
return true;
if (!$("#phone1").val() || !$("#phone2").val() || !$("#phone3").val()) {
return false;
}
return true;
}, "phone is required.");
I kept the original solution. The validation errors on the first two fields goes away when you click on them or submit form. Not ideal but not a show stopper!
I want to check whether confirm password matches with password or not, through onkeypress() function. It's not working.. Some of the part working like password length must be 6 character. But, I'm having problem.. when i'm typing value for confirm password.. it is showing div error message even after when it matches with the password value which i entered in password text. Please help. Here is my code.
<input type='password' class='Register-textbox Password' name="Password" onkeypress="RegistrationValidation()">
<input type='password' class='Register-textbox ConfirmPassword' name="ConfirmPassword" onkeypress="RegistrationValidation()">
<div class="ShowPasswordNotMatchesError" style="display:none;">
* Password Mismatch
</div>
<script>
function RegistrationValidation()
{
var PasswordVal=$('.Password').val();
var ConfirmPasswordVal=$('.ConfirmPassword').val();
if(PasswordVal!=ConfirmPasswordVal)
{
$('.ShowPasswordNotMatchesError').show();
}
}
</script>
When you are using jQuery, please make use of those functions. I have made the following changes:
Made the code unobtrusive.
Checked for the correctness on blur().
Checked only if the user has entered something.
Removed unnecessary braces.
Added reverse condition.
Try this way:
$(function () {
$(".Register-textbox").blur(function () {
var PasswordVal=$('.Password').val();
var ConfirmPasswordVal=$('.ConfirmPassword').val();
if(PasswordVal != ConfirmPasswordVal && ConfirmPasswordVal.length > 0 && PasswordVal.length > 0)
$('.ShowPasswordNotMatchesError').show();
else
$('.ShowPasswordNotMatchesError').hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type='password' class='Register-textbox Password' name="Password" />
<input type='password' class='Register-textbox ConfirmPassword' name="ConfirmPassword" />
<div class="ShowPasswordNotMatchesError" style="display:none;">
* Password Mismatch
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I'm trying to call a function when submit form , this function showld work for all forms with div "#js_ajax_form".
( the javascript code works in chrome console
// html code
<form method="post" id="js_ajax_form" data-type="user.registration" action="signup">
<input type="text" name="val[first_name]" id="first_name" placeholder="First Name" value="" size="30">
<input type="text" name="val[last_name]" id="last_name" placeholder="Last Name" value="" size="30">
<input type="submit" value="Sign Up" class="button_register" id="js_registration_submit">
</form>
// javascript
var $Core = {};
function getParam(sParam)
{
return oParams[sParam];
}
$Core.form = function()
{
$("#js_ajax_form").submit(function(e)
{
var postData = $(this).serializeArray();
alert(postData);
e.preventDefault(); //STOP default action
e.unbind(); //unbind. to stop multiple form submit.
});
}
as long as you are using jQuery, the following code should work:
$("#myform").submit(function() {
myFunction();
// the form will continue on submission
});