We Keep Coding

Validate User input to take characters and numbers using regular expression not working

I'm doing validation on User login input I wanted to be like ab12123. so I validate it by javascript to validate on button click. if it is not valid, it should show a message. the problem is the function doesn't work and I open the dev tools to inspect the javascript, there is no error.
the view:
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
<label class="control-label col-md-2">
User Login <span class="required" id="star">*</span>
</label>
<div class="col-md-4">
#Html.TextBox("UserLogin", null, new { #class = "form-control", required = "required" , id= "UserLogin" })
<div class="col-lg-3" id="checkID" hidden>
<label style="color:red">Please enter the ID in the Proper Format Numbers only EX:kl12123</label>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">
Username <span class="required" id="star">*</span>
</label>
<div class="col-md-4">
#Html.TextBox("UserName" , null, new { #class = "form-control", required = "required", id = "UserName" } )
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">
Groups <span class="required" id="star">*</span>
</label>
<div class="col-md-4">
#Html.DropDownList("GroupID", null, htmlAttributes: new { #class = "form-control", required = "required" , id= "GroupID" })
#Html.ValidationMessageFor(model => model.GroupID, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="button" class="btn btn-success" value="ValidateMe" onclick="ValidateMe()" />
</div>
</div>
</div>
}
javascript:
function ValidateMe() {
//$('#GroupID').on('change', function () {
var IDValid = false;
var Login = $('#UserLogin').val();
var name = $('#UserName').val();
var GroupId = $('#GroupID').val();
if (Login.length < 6) {
$('#checkID').show();
IDValid = false;
}
else {
var regexnumber = new RegExp(/(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/);
if (regexnumber.test(Login)) {
$('#checkID').hide();
IDValid = true;
}
else {
$('#checkID').show();
IDValid = false;
}
}
if (IDValid == true) {
var data = {
UserLogin: Login,
UserName: name,
UserGroup: GroupId
};
$.ajax({
type: 'POST',
url: '/Account/SaveUser',
data: data
});
}
}
I appreciate your help in this matter.
Thank you.

MVC can automatically handle client side validation using jQuery-validate, which should come pre-setup. It uses attributes on the model to set the validation requirements, and the Html.HelperFor extensions for model binding. You should see this line in App_Start/BundleConfig.cs confirming it's installed:
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
If not, you can download it here, unZIP and install in the Scripts directory, and add the above line to your BundleConfig.cs.
You would use this method like so:
Model
using System.ComponentModel.DataAnnotations;
public class User
{
[Required]
[RegularExpression(#"(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}", ErrorMessage = "Please enter the ID in the Proper Format Numbers only EX:kl12123")]
public string UserLogin { get; set; }
[Required]
public string UserName { get; set; }
[Required]
public int UserGroup
}
View
#model Namespace.User
// Replace the #Html.TextBox() helpers with these:
#Html.TextBoxFor(model => model.UserLogin, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.UserLogin, "", new { #class = "text-danger" })
#Html.TextBoxFor(model => model.UserName, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.UserName, "", new { #class = "text-danger" })
#Html.DropDownListFor(model => model.UserGroup, null, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.UserGroup, "", new { #class = "text-danger" })
// Place the following at the very bottom of your view:
#section scripts
{
#Scripts.Render("~/bundles/jqueryval")
}
Gives us this:

Trigger modal if form valid using jquery

I have a problem wherein when a form is submitted, it should trigger a modal when it is valid and if it is not valid, it should trigger the validation script. I have tried looking for answers in the forum and came across one problem that resembles mine. But unfortunately, the modal still doesn't pop-up.
What I wanted to happen was when a user clicks the submit button, a validation will run and if all data is valid, it will trigger the modal to pop-up and if invalid, the validation will occur just like here.
MODEL
public class Reg
{
[Required(ErrorMessage = "Please enter first name")]
public string Firstname { get; set; }
[Required(ErrorMessage = "Please enter MiddleInitial")]
public string MiddleInitial { get; set; }
[Required(ErrorMessage = "Please enter Surname")]
public string Surname { get; set; }
}
CONTROLLER
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Index(Reg reg)
{
return View();
}
VIEW
#model WebApplication1.Models.Reg
<div class="col-lg-offset-4 col-lg-12">
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<div class="form-group">
#Html.LabelFor(model => model.Firstname, htmlAttributes: new { #class = "control-label" })
#Html.EditorFor(model => model.Firstname, new { htmlAttributes = new { #class = "form-control", placeholder = #Html.DisplayNameFor(m => m.Firstname) } })
#Html.ValidationMessageFor(model => model.Firstname, "", new { #class = "text-danger" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.MiddleInitial, htmlAttributes: new { #class = "control-label" })
#Html.EditorFor(model => model.MiddleInitial, new { htmlAttributes = new { #class = "form-control", placeholder = #Html.DisplayNameFor(m => m.MiddleInitial) } })
#Html.ValidationMessageFor(model => model.MiddleInitial, "", new { #class = "text-danger" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.Surname, htmlAttributes: new { #class = "control-label" })
#Html.EditorFor(model => model.Surname, new { htmlAttributes = new { #class = "form-control", placeholder = #Html.DisplayNameFor(m => m.Surname) } })
#Html.ValidationMessageFor(model => model.Surname, "", new { #class = "text-danger" })
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
}
</div>
<div id="modals" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Confirm Submit
<button type="button" data-dismiss="modal" aria-hidden="true" class="close">×</button>
</div>
<div class="modal-body">
#Html.Partial("CedulaPartial")
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<input type="submit" value="Submit" class="btn btn-success" />
</div>
</div>
</div>
</div>
JQUERY
<script type="text/javascript">
$('form').submit(function () {
if ($(this).valid()) {
$('#modals').modal('show');
}
});
I also have tried
$('#myModal').modal("show");
$('#myModal').dialog('open');
$('#myModal').modal();
$('#myModal').show();
$('#myModal').modal('toggle');
but still no luck.
Thanks in advance.

UPDATE
After modifying the script, what happens is that the form cannot be clicked. I think the modal is being triggered but no modal is showing. Here is the output:
https://media.giphy.com/media/61Z50T2JEpN1Zrk8hZ/giphy.gif
Until I came across this, I tried removing the fade command in class and now the modal is showing. I am currently using Bootstrap v3.0.0 and the fade command has a bug in here. Thanks for your support guys!

Ajax Values to Controller Method

I am trying to pass values to my controller, from my view using ajax. I am relatively new to using ajax so I need some help figuring this out.
Full Page
#model ALSummary.Models.MonthReport
#{
ViewBag.Title = "Index";
}
<h2><strong>Generate Monthly Report</strong></h2>
<br />
<hr />
#Html.BeginForm("Generate", "MonthReports", FormMethod.Post, htmlAttributes: new { id = "GenerateForm" }){
<div class="form-horizontal">
<div class="form-group">
#Html.Label("Choose AC:", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("AC", null, "-- Select AC --", htmlAttributes: new { id = "AC", #class = "form-control" })
</div>
</div>
</div>
<div class="form-horizontal">
<div class="form-group">
#Html.Label("Choose Month:", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("Months", null, "-- Select Month --", htmlAttributes: new { id = "Month", #class = "form-control" })
</div>
</div>
</div>
<div class="form-horizontal">
<div class="form-group">
#Html.Label("Year:", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("Years", null, "-- Select Year --", htmlAttributes: new { id = "Year", #class = "form-control" })
</div>
</div>
</div>
<br />
<input type="submit" id="SendToController" class="btn btn-primary" value="Generate" />
}
<script type="text/javascript">
$('#SendToController').on('click', function() {
sendToController();
return false;
});
function sendToController(){
var selectedAC = $('#AC').val();
var selectedMonth = $('#Month').val();
var chosenYear = $('#Year').val();
$.ajax({
url: #Url.Action("Generate", "MonthReports", null),
data: { 'id' : selectedAC, 'monthValue' : selectedMonth, 'year' : chosenYear },
type: 'GET',
cache: false,
success: function(data){},
});
}
</script>
Error Message:
Here is where the red squiggly lines are happenning when I receive the error message:

Your AJAX and Controller look fine... the error reported is because your javascript function can't be found (isn't present) at the time that the HTML is loaded for the Submit input (usually this is because the JS isn't loaded until after the DOM, my guess is that your script block is at the end of your body and not in the head (which is fine/preferred, just needs to be handled a bit differently)).
I typically prefer to bind events via JS rather than the HTML. Remove the onclick="sendToController()" from your HTML, and add this to your JavaScript:
$("#FormID").on('submit', function(event) {
event.preventDefault();
sendToController();
return false; // prevent submit from submitting
});
function sendToController() {
// your other code here
}
Change FormID to the ID of the form as required.

How to set Time-picker in MVC 4

I need to create a view that includes a field with time only. Can anyone help me on how to create Timepicker in MVC 4 razor.
This is my code:
Model
public TimeSpan TIME_OUT { get; set; }
View
<div class="form-group">
#Html.LabelFor(model => model.TIME_OUT, "End Time", htmlAttributes: new { #class = "col-xs-4 col-sm-offset-1 col-sm-4" })
<div class='input-group date col-xs-8 col-sm-6' id='timeout'>
#Html.TextBoxFor(model => model.TIME_OUT, new { #class = "form-control" })
<span class="input-group-addon">
<span class="glyphicon glyphicon-time">
</span>
</span>
</div>
</div>
JavaScript:
$(function () {
$('#timeout').datetimepicker({
format: 'LT'
});
});
This is the result of my code:
But when I click the time icon, it doesn't show the result I want
This is what I want to do in my timepicker

You can use bootstrap time picker, and set it by this Jquery
$("#YourId").timepicker("setTime", '');
Refer this Bootstrap Timpicker examples,
https://eonasdan.github.io/bootstrap-datetimepicker/
responsive-bootstrap-3-timepicker
http://tarruda.github.io/bootstrap-datetimepicker/

Double clicking error with JQuery and ASP MVC

Good morning!
I have a checkbox in my Razor and it shows a div with a datepicker when the check box is checked.
My error is when I double click the checkbox shows the div with the datepicker when is not checked (Do the opposite of what I need).
Here is my code:
<div class="form-group">
#Html.LabelFor(model => model.SupHUBZoneCertified, htmlAttributes: new { #class = "control-label col-md-4" })
<div class="col-md-8">
<div class="checkbox" id="cb1">
<label>
#Html.EditorFor(model => model.SupHUBZoneCertified)
#Html.ValidationMessageFor(model => model.SupHUBZoneCertified, "HUB Zone Certified:")
</label>
</div>
</div>
</div>
<div class="form-group" id="dateCb1" style="display:none">
#Html.LabelFor(model => model.SupCategoryHUBZoneDate, htmlAttributes: new { #class = "control-label col-md-4" })
<div class="col-md-8">
#Html.EditorFor(model => model.SupCategoryHUBZoneDate, new { htmlAttributes = new { #class = "form-control datepicker" } })
#Html.ValidationMessageFor(model => model.SupCategoryHUBZoneDate, "", new { #class = "text-danger" })
</div>
</div>
and my javascript:
$("#cb1").click(function () {
$("#dateCb1").toggle(this.checked);
});

Assuming that you're using a jQuery UI datepicker, I can't see the toggle method in the api docs
There are only show and hide methods.
So you should modify your code:
$("#cb1").click(function () {
var action = this.checked ? "show" : "hide";
$("#dateCb1").datepicker(action);
$("#dateCb1").toggle(this.checked);
});

Thank you all I found the error, so basically I can't use the #cb1 as the checkbox ID because I need to use the ID of the input.
The ID for the input is self generated in ASP MVC and use the name declared in the MVC model.
So the code would be
$("#SupHUBZoneCertified").click(function () {
$("#dateCb1").toggle(this.checked);
});
I found the input class name using "Inspect Element in Internet Explorer"