here i am using VeeValidate Form Validation Library For Vue Js. Using CDN i am trying to achieve this but i am not able to validate the email input fields. SO where i am going wrong please tell if any one can find the issue.
<html>
<head>
<!-- jsdelivr cdn -->
<script src="https://cdn.jsdelivr.net/npm/vee-validate#latest/dist/vee-validate.js"></script>
<script src="https://unpkg.com/vue#next"></script>
<!-- cloudflair cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vee-validate/2.1.1/vee-validate.min.js"></script>
</head>
<body>
<input v-validate="'required|email'" name="email" type="text">
<span>{{ errors.first('email') }}</span>
</body>
</html>
Vue.use(VeeValidate);
new Vue({
el: '#root',
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vee-validate/2.2.9/vee-validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#vee-validate/rules#4.4.7/dist/vee-validate-rules.min.js"></script>
<div id="root">
<div>
<input v-validate="'required|email'" name="email" type="text">
<span>{{ errors.first('email') }}</span>
</div>
</div>
You forgot to bind a Vue object to an HTML element i.e
new Vue({
el: '#root',
});
I also added the vee validate plugin using
Vue.use(VeeValidate);
Please note am using Vue 2 not 3
Related
``I am new in using ckeditor and working on simple crud application using ckeditor. it is working well in the create blade but not showing in the update blade.
here is my blade code
<script src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.ckeditor').ckeditor();
})
</script>
</head>
<body>
<form method = "post" action="{{url('updateblog')}}" enctype = "multipart/form-data">
#csrf
#method('PATCH')
<label for="title">Title</label>
<textarea class="ckeditor form-control" name="title">{!!$blog ->title!!}</textarea><br>
</form>
Try this, this worked for me:
<textarea class="ckeditor form-control" name="title">{{ $blog->title }}</textarea>
I hope i can help you.
I want to add datetimepicker into my in my laravel 8 app with jquery 3.4/bootstrap 4.6 , but adding m
#section('headerscripts')
<link rel="stylesheet" href="{{admin_assets}}/css/jquery.fancybox.min.css"/>
<link rel="stylesheet" href="{{admin_assets}}/css/selectize.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" integrity="sha256-yMjaV542P+q1RnH6XByCPDfUFhmOafWbeLPmqKh11zo=" crossorigin="anonymous" />
{{-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">--}}
#stop
...
#section('footerscripts')
<script src="{{admin_assets}}/js/jquery.fancybox.min.js"></script>
<script src="{!!admin_assets!!}/js/pages/crud/forms/widgets/select2.js"></script>
<script src="{!!admin_assets!!}/js/pages/crud/forms/editors/summernote.js"></script>
<script src="{!!admin_assets!!}/js/pages/crud/forms/editors/AutoNumeric/AutoNumeric.js"></script>
<script src="{{admin_assets}}/js/jquery.caret.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js" integrity="sha256-5YmaxAwMjIpMrVlK84Y/+NjCpKnFYa8bWWBbUHSBGfU=" crossorigin="anonymous"></script>
...
$(document).ready(function () {
$('#dob').datetimepicker();
...
<div class="form-group">
<label for="user_id">
User <span class="text-danger">*</span>
</label>
<div class="input-group" id="dob">
<input type="text" class="form-control" placeholder="Date Of Birth">
<div class="input-group-addon">
<span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
</div>
</div>
But having datetimepicker on form(without any errors in browser's console)
it looks like icons are not supported : https://prnt.sc/1r10yxn
If to uncomment line in
#section('headerscripts')
section
{{-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">--}}
all icons of datetimepicker are shown ok, but I have some design breaks on my page.
I think that is a not goodidea to add 3.3.7/css/bootstrap.min.css into my bootstrap 4.6 for icons support.
If there is a way to fix it correctly?
Maybe are some some bettre datetimepicker libraries for my app?
Thanks!
It's not wise to use both version of Bootstrap. Some css elements may be changed or deprecated that cause your design broken.
I suggest using daterangepicker at here
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<input id="my-calendar" type="text" name="date">
<i class="fa fa-calendar" aria-hidden="true"></i> <!-- Using Font Awesome -->
<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script>
$('#my-calendar').daterangepicker({
"singleDatePicker": true,
"showDropdowns": true,
locale: { format: 'DD/MM/YYYY' },
});
</script>
I work on Laravel + Vuejs. Something has just happened, since then my script as copied hereunder doesn't work, chrome doesn't detect any vuejs script.
Astonishingly, the same script works well if I copy it into backup directory & run PHP artisan instance from there. Need advise. Actually problem seems with routerview which could not activate due to unknown problem. did i wrongly uninstall something which need to reinstall again ? because seems router doesn't work
kash.blade.php: - Main script
<head>
<link rel="stylesheet" type="text/css" href="{{ asset('css/app.css')}}">
<link href="{{asset('backend/vendor/fontawesome-free/css/all.min.css')}}"
rel="stylesheet" type="text/css">
<link href="{{asset('backend/vendor/bootstrap/css/bootstrap.min.css')}}"
rel="stylesheet" type="text/css">
</head>
<body id="page-top">
<div id="app">
<div id="wrapper">
<div class="container-fluid" id="container-wrapper">
<router-view></router-view>
</div>
</div>
</div>
<script src="{{asset('js/app.js')}}"></script>
<script src="{{asset('backend/vendor/jquery/jquery.min.js')}}"></script>
<script src="{{asset('backend/vendor/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
<script src="{{asset('backend/vendor/jquery-easing/jquery.easing.min.js')}}"></script>
</body>
</html>
route.js: - where I describe the component route as to where login.vue lies
let login = require('./components/auth/login.vue').default;
export const routes = [
{ path: '/', component: login, name:'/' },
]
Login.vue: - Just a simple vue script with two text boxes.
<template>
<div>
<div class="container-login">
<h1 class="h4 text-gray-900 mb-4">Login</h1>
</div>
<form class="user" #submit.prevent="login">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail"
placeholder="Enter Email Address" v-model="form.email">
</div>
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword"
placeholder="Password" v-model="form.password">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Login</button>
</div>
<hr>
</form>
<hr>
<div class="text-center">
</div>
</div>
</template>
<script type="text/javascript">
export default {
data(){
return {
form:{
email: null,
password: null
}
}
},
methods:{
}
}
</script>
I'm trying to use owl carousel in laravel 5.6
I've included the following in the header and footer sections of the layout template
layouts/app.blade.php
<head>
<link rel="stylesheet" href="{{ asset('js/owlcarousel/dist/assets/owl.carousel.min.css') }}">
<link rel="stylesheet" href="{{ asset('js/owlcarousel/dist/assets/owl.theme.default.min.css') }}">
</head>
<body>
<script src="{{ asset("js/jquery/dist/jquery.min.js") }}"></script>
<script src="{{ asset("js/owlcarousel/dist/owl.carousel.min.js") }}"></script>
</body>
I have added the below in the welcome.blade.php
<div class="owl-carousel">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
</script>
I do not see any slider. I see an error in the developer tools console that says
Uncaught ReferenceError: $ is not defined
How to solve this?
The issue is with bootstrap 4. However it works fine with bootstrap 4.1. Hence closing this question.
Hope it helps!
You should link JQuery first like this:
<script src="jquery.js" type="text/javascript"></script>
so here's my problem.
i have a html page with a simple form and some javascript (jquery) code to validate it, ok then.
this page would looks like this: test.html
<html>
<head>
<title></title>
<script src="jquery-1.7.min.js" type="text/javascript"></script>
<script type="text/javascript">
function validate(){
$('form').submit(function () {
var txt = $('#SYSTEM_NAME').val();
if (txt == '') $('#loading').append('field is empty');
return false;
})
}
window.onload = validate
<form action="SomeAction" id="form0" method="post">
<fieldset>
<legend>Information</legend>
<div class="editor-field">
<input id="SYSTEM_NAME" name="SYSTEM_NAME" type="text" value="" />
</div>
<input type="submit" value="Insert" id="saveCreation" />
<div id="loading"></div>
</fieldset>
</form>
</body>
</html>
In this page above, if you try to insert without any information on the field 'SYSTEM_NAME', it would dysplay a message. Everything is fine here my form is validated.
But when i load this page from another one using ajax(jquery), what occurs is, after loaded it the validation that i made on 'test.html' doenst work.
Example:
<html>
<head>
<title></title>
<script src="jquery-1.7.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('#go').click(function(){
$('#here').load('test.html')
});
</script>
</head>
<body>
<input type='button' id='go' value='go' />
<div id='here'></div>
</body>
</html>
Now if i click on 'Insert' the validation doest work anymore.
How can i solve this problem ? can i interact with loaded page and javascript code together ?
Hope you guys have understood my problem. Thanks and sorry for enlish mistakes.
forgive me if this is too much of a change, but i thought i might suggest another method for you. what about using jquery validate to help you with the validation? here is an example with the ajax-response validating as you want. below is the parent document... (notice that i am including jquery validate in the head. just ignore the 'get_test' i am using to load the partial.)
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#go').click(function() {
$('#here').load('get_test');
});
});
</script>
</head>
<body>
<input type='button' id='go' value='go' />
<div id='here'></div>
</body>
</html>
and the partial i am loading below... (notice that the text input has a class of 'required' - this is how jquery validate works. you will also see a validate method.)
<script type="text/javascript">
$("#form0").validate();
</script>
<form action="SomeAction" id="form0" method="post">
<fieldset>
<legend>Information</legend>
<div class="editor-field">
<input id="SYSTEM_NAME" name="SYSTEM_NAME" type="text" value="" class="required" />
</div>
<input type="submit" value="Insert" id="saveCreation" />
<div id="loading"></div>
</fieldset>
</form>