How to write code for modal? I tried as semantic documentation but i can't get result.
I include:-
<link rel="stylesheet" type="text/css" href="css/semantic.css">
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/components/modal.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/semantic.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/components/modal.min.js"></script>
<script type="text/javascript">
$('.ui.modal').modal('show');
});
</script>
Here is my code:-
<div class="ui modal">
<form class="ui form">
<div class="field">
<label>Old password</label>
<input type="text" name="oldpass" placeholder="old password">
</div>
<div class="field">
<label>Last Name</label>
<input type="text" name="newpass" placeholder="new password">
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" tabindex="0" class="hidden">
<label>I agree to the Terms and Conditions</label>
</div>
</div>
<button class="ui button" type="submit">Submit</button>
</form>
</div>
Please give some idea. Advance Thanks..
There are two problems in your code:
You're trying to get the .ui.modal before it's declared in the HTML. You must place the script tag before closing the body tag, but after all the other tags. Or you must use some ready event.
Your code has a sintax error. You must remove that }); at the end of your script.
Take a look at the example below working:
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.css">
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/components/modal.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/components/modal.min.js"></script>
<div class="ui modal">
<form class="ui form">
<div class="field">
<label>Old password</label>
<input type="text" name="oldpass" placeholder="old password">
</div>
<div class="field">
<label>Last Name</label>
<input type="text" name="newpass" placeholder="new password">
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" tabindex="0" class="hidden">
<label>I agree to the Terms and Conditions</label>
</div>
</div>
<button class="ui button" type="submit">Submit</button>
</form>
</div>
<script type="text/javascript">
$('.ui.modal').modal('show');
</script>
Related
I have an issue with BS modal (im using BS 3) and it is confirming form submission. But it is placed in accordion and when i click e.g. 5th element modal and validator works but shows error in first element. I dont know what can be the problem, maybe data-toggle is mixed (modal and validator).Below I put that part of code (with erased loop and other things connected with template viewer -> smarty)
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div id="accordion_dotacja">
<b>Udostępnij kod pracownikowi:</b> <br>
<div class="row">
<div class="col-xs-9" style="padding-right:0;">
<input class="form-control" type="text" value="" id="" style="border-top-right-radius: 0; border-bottom-right-radius: 0;" readonly>
</div>
<div class="col-xs-3" style="padding-left:0;">
<button class="btn button btn-info" style="border-top-left-radius: 0; border-bottom-left-radius: 0;">Kopiuj kod</button>
</div>
</div><br>
<b>Albo załóż konto pracownika:</b> <br><br>
<form id="myForm" action="" method="post" data-toggle="validator" role="form">
<div class="row">
<div class="col-sm-6 form-group">
Imię:<br>
<input type="text" class="form-control" name="employee_name" data-error="Proszę podać imię." required>
<div class="help-block with-errors"></div>
</div>
<div class="col-sm-6 form-group">
Nazwisko:<br>
<input type="text" class="form-control" name="employee_surname" data-error="Proszę podać nazwisko." required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="row">
<div class="col-sm-6 form-group">
Numer telefonu:<br>
<input placeholder="9-cyfrowy numer telefonu" type="text" class="form-control" name="employee_phone" data-error="Proszę podać numer telefonu" pattern="[0-9]{9}" required>
<div class="help-block with-errors"></div>
</div>
<div class="col-sm-6 form-group">
Adres e-mail:<br>
<input type="email" class="form-control" name="employee_email" data-error="Proszę podać prawidłowy adres e-mail." required>
<div class="help-block with-errors"></div>
</div>
</div>
<input type="hidden" name="action" value="register_employee">
<input type="hidden" name="kurs_id" value="">
<input type="hidden" name="hash" value="">
<input type="button" name="btn" value="Utwórz" id="submitBtn" data-toggle="modal" data-target="#confirm-submit" class="btn button btn-primary" />
</form>
</div>
</div>
<div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<p class="body" style="font-family: BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; font-weight: 400;">
<b> Klikając „Załóż konto/Aplikuj” akceptujesz
Regulamin Serwisu i potwierdzasz, że zapoznałeś się z
Polityką ochrony prywatności oraz
Polityką Cookies.
</b>
</p>
</div>
<div class="modal-footer">
<button type="submit" form="myForm" class="btn btn-success col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-3 col-md-10 col-md-offset-1 col-lg-10 col-lg-offset-1">Załóż konto/Aplikuj
</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I dont use any js file to this (only the validator, but its default code).
To clarify whats going on with this problem i attach video https://drive.google.com/file/d/1pYwLbxyZTZUFiGXny5LdO9Zg1S9_jKnr/view?usp=sharing
Earlier the code was without modals an validator was working correctly e.g i click submit on 5th element and validator runs in this element and so on.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div id="accordion_dotacja">
<div>
<b>Udostępnij kod pracownikowi:</b> <br>
<div class="row">
<div class="col-xs-9" style="padding-right:0;">
<input class="form-control" type="text" value="" id="hash_{$v.id}" style="border-top-right-radius: 0; border-bottom-right-radius: 0;" readonly>
</div>
<div class="col-xs-3" style="padding-left:0;">
<button class="btn button btn-info" style="border-top-left-radius: 0; border-bottom-left-radius: 0;">Kopiuj kod</button>
</div>
</div><br>
<b>Albo załóż konto pracownika:</b> <br><br>
<form action="" method="post" data-toggle="validator" role="form" onsubmit="return confirm('Czy na pewno chcesz założyć konto pracownikowi?');">
<div class="row">
<div class="col-sm-6 form-group">
Imię:<br>
<input type="text" class="form-control" name="employee_name" data-error="Proszę podać imię." required>
<div class="help-block with-errors"></div>
</div>
<div class="col-sm-6 form-group">
Nazwisko:<br>
<input type="text" class="form-control" name="employee_surname" data-error="Proszę podać nazwisko." required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="row">
<div class="col-sm-6 form-group">
Numer telefonu:<br>
<input placeholder="9-cyfrowy numer telefonu" type="text" class="form-control" name="employee_phone" data-error="Proszę podać numer telefonu" pattern="[0-9]{9}" required>
<div class="help-block with-errors"></div>
</div>
<div class="col-sm-6 form-group">
Adres e-mail:<br>
<input type="email" class="form-control" name="employee_email" data-error="Proszę podać prawidłowy adres e-mail." required>
<div class="help-block with-errors"></div>
</div>
</div>
<input type="hidden" name="action" value="register_employee">
<input type="hidden" name="kurs_id" value="{$i}">
<input type="hidden" name="hash" value="{$v.hash}">
<input type="submit" class="btn button btn-primary" value="Utwórz">
</form>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
production code snippet
version of bootstrap - 3.3.7
Thanks in advance for help :)
I try to create bootstrap form which will after wrong submission change the color of the borders to the red. The Problem is that textbox it will always stay in red. Any ideas how can I set the textbox borders red after wrong input. Is there any class in bootstrap that will automatically output that borders in red color after wrong input?
if ($('#TextBoxID').val() == '') {
$('#TextBoxID').css('border-color', 'red');
} else {
$('#TextBoxID').css('border-color', '');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#200;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
<div class="sign-up container">
<h2>Sign Up</h2>
<p>Please fill this form to create an account.</p>
<form action="" method="post">
<div class="form-group">
<label>Username</label>
<input id="TextBoxID" type="text" name="username" class="form-control" value="">
<span class=" text-danger"></span>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control" value="">
<span class="text-danger"></span>
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" name="confirm_password" class="form-control" value="">
<span class=" text-danger"></span>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Submit">
<input type="reset" class="btn btn-default" value="Reset">
</div>
<p>Already have an account? Login here.</p>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
The Problem is that textbox it will always stay in red.
It is because of this line if ($('#TextBoxID').val() == ''). You need to check this on form submit
function formSubmit(e) {
e.preventDefault();
if ($('#TextBoxID').val() == '') {
$('#TextBoxID').css('border-color', 'red');
} else {
$('#TextBoxID').css('border-color', '');
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#200;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
<div class="sign-up container">
<h2>Sign Up</h2>
<p>Please fill this form to create an account.</p>
<form action="" method="post">
<div class="form-group">
<label>Username</label>
<input id="TextBoxID" type="text" name="username" class="form-control" value="">
<span class=" text-danger"></span>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control" value="">
<span class="text-danger"></span>
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" name="confirm_password" class="form-control" value="">
<span class=" text-danger"></span>
</div>
<div class="form-group">
<button onclick="formSubmit(event)" type="submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn btn-default" value="Reset"></button>
</div>
<p>Already have an account? Login here.</p>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
I am trying to validate my form using parsley.js, I am working as the official good book says to do so but due to some reasons (that I obviously don't know right now), it is not working.
Here is the code
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Parsley JS Form Validation</h2>
<form data-validate="parsley">
<label>Name </label>
<input type="text" name="fname" class="form-control" required />
<label>Email </label>
<input type="text" name="email" class="form-control" data-type="email" data-trigger="change" required />
<label>Password </label>
<input type="text" name="lname" class="form-control" data-type="password" required />
<br />
<input type="submit" class="btn btn-success" value="Submit">
</form>
</div>
</div>
</div>
Here is the Plunkr link.
I dont know how to save it so I'm posting it here:
I changed the jquery version, the parsley version (you used an old one), and also added the css from parsley site. Your tag attributes were wrong. this works:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Parsley JS</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://parsleyjs.org/src/parsley.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.3.4/parsley.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Parsley JS Form Validation</h2>
<form data-parsley-validate="parsley">
<label>Name </label>
<input type="text" name="fname" class="form-control" required="true" />
<label>Email </label>
<input name="email" class="form-control" type="email" data-parsley-trigger="change" required="true" />
<label>Password </label>
<input name="lname" class="form-control" type="password" required="true" />
<br />
<input type="submit" class="btn btn-success" value="Submit">
</form>
</div>
</div>
</div>
</body>
</html>
The problem was is was using data-required instead I have to use data-parsley-required and also instead of data-validate="parsley" it should be data-parsley-validate="parsley"
Plunkr modified
I am trying to display two alerts in a simple form. One, if any field is empty other on successful submission. This is a simple form for learning purpose.
It is now showing error that 'Undefined formGroupExampleInput'
Please Help so that the validation can be done.
Thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/mycss.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
</head>
<body>
<h1>Welcome to MAC Library!!</h1>
<h2>Registration Page</h2>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">GROUP 4</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>My Account</li>
<li>Register</li>
</ul>
</div>
</nav>
</br>
</br>
<h3 class="myh3">Sign up as new user to receive email updates about upcoming events in the city</h3>
<script type="text/javascript">
function submitForm()
{
if(document.form1.formGroupExampleInput.value==""||
document.form1.formGroupExampleInput2.value==""||
document.form1.exampleInputEmail1.value==""||
document.form1.exampleInputPassword1.value==""){
alert("Enter all fields");
}
else{
document.forms["form1"].submit();
alert("Your Form Successfully Submitted");
}
}
</script>
<div>
<form id="form1">
document.form1.formGroupExampleInput.value
<fieldset class="form-group">
<div class="required">
<label for="formGroupExampleInput">First Name</label>
<input type="text" required="required" class="form-control" id="formGroupExampleInput" placeholder="Enter your first name">
</div>
</fieldset>
<fieldset class="form-group">
<div class="required">
<label for="formGroupExampleInput2">Last Name</label>
<input type="text" required="required" class="form-control" id="formGroupExampleInput2" placeholder="Enter your last name">
</div>
</fieldset>
<fieldset class="form-group">
<div class="required">
<label for="exampleInputEmail1">Email address</label>
<input type="email" required="required" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
<small class="text-muted">We'll never share your email with anyone else.</small>
</div>
</fieldset>
<fieldset class="form-group">
<div class="required">
<label for="exampleInputPassword1">Password</label>
<input type="password" required="required" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
</fieldset>
<fieldset class="form-group">
<label>Gender</label>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Male
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Female
</label>
</div>
</fieldset>
<button type="button" class="btn btn-primary" onclick="submitForm();">Submit</button>
</form>`enter code here`
</div>
</body>
</html>
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="gm.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile.structure-1.0.min.css"/>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script src="assets/custom.js"></script>
<script type="text/javascript" src="assets/ejs_production.js"></script>
</head>
<body>
<div data-role="page" data-add-back-btn="true" id="pageregister">
<div data-role="header">
<h1>Sign Up</h1>
</div>
<!-- /header -->
<div data-role="content">
<form action="someurl.html" method="post" id="registerform">
<fieldset>
<div data-role="fieldcontain">
<label for="email">Email:</label>
<input type="text" name="email" id="email" value="" />
</div>
<div data-role="fieldcontain">
<label for="email2">Re-type email:</label>
<input type="text" name="email2" id="email2" value=""
/>
</div>
<div data-role="fieldcontain">
<label for="password">Password:</label>
<input type="password" name="password" id="password"
value="" />
</div>
<div data-role="fieldcontain">
<label for="password2">Re-type password:</label>
<input type="password" name="password2" id="password2"
value="" />
</div>
<button type="submit"
data-theme="b" name="submit" value="submit-value">Sign Up</button>
</fieldset>
</form>
<script>
$('#pageregister').live('pageshow', function (event) {
var url = baseURL + "users/add.json";
$("registerform").attr("action", url); //THIS HAS NO EFFECT?????
alert(url); //I SEE THIS
});
</script>
</div>
<!-- /content -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>
Search
</li>
<li>
Info
</li>
</ul>
</div>
<!-- /navbar -->
</div>
<!-- /footer -->
</div>
<!-- /page -->
</body>
</html>
Your selector is wrong, you are missing # in id selector.
Change this
$("registerform").attr("action", url);
to
$("#registerform").attr("action", url);
As a side note, always wrap your code inside DOM ready event which will ensure that DOM is available before trying to find the elements.
$(function(){
//Your code goes here
$('#pageregister').live('pageshow', function (event) {
var url = baseURL + "users/add.json";
$("#registerform").attr("action", url);
});
});